media query isn't working, using Classes to change display property - css

Question

I have a simple media query that isn't working... here is my code:
In an external stylesheet:
#media screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:visible !important;}
}
Next, in the html of my PHP Header file I have two sets of Logo HTML, each in its own wrapper with one of the classes above:
<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div>
</div>
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;">
<div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div>
</div>

Answer 1

It doesn't work because the browser will always use inline css over css defined by "" over external styles.
Maybe you want to use Chrome DevTools (F12), they will make your life much easier

Answer 2

there is value of display is not correct, there is no such a thing as visible, it should be something from the list defined to the property, see http://www.w3schools.com/cssref/pr_class_display.asp for valid values.
Usually, if you hover your mouse over the yellow warning mark, it says what is wrong.

Answer 3

You are misusing the display property of css.
The display property specifies the type of box used for an HTML element.
There is no such thing as display: visible;.
Have a look in here
inline Default value. Displays an element as an inline element like span
block Displays an element as a block element like p
flex Displays an element as an block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a li element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a table element
table-caption Let the element behave like a caption element
table-column-group Let the element behave like a colgroup element
table-header-group Let the element behave like a thead element
table-footer-group Let the element behave like a tfoot element
table-row-group Let the element behave like a tbody element
table-cell Let the element behave like a td element
table-column Let the element behave like a col element
table-row Let the element behave like a tr element
none The element will not be displayed at all (has no effect on
layout)
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element.
Sample css:
#media only screen and (max-width: 768px) {
.logo_1000{display:none !important;}
.logo_320{display:block !important;}
}

Answer 4

SOLVED:
The problem was hiarchy of cascade rules. The external style sheet where the media query resided could not over-ride the display properties set internally in the HTML document. The solution was to move the internal css to the external style sheet, then show and hide the elements in the media query. Like so:
/****LOGO*******************/
/Fix for Mobile Phones/
/***************************/
.logo_1000{display:inline-block;}/ * Show the default * /
.logo_320{display:none;} / * Hide the Mobile * /
#media screen and (max-width: 768px) { / *now we're on mobile, swap the logos * /
.logo_1000{display:none !important;}
.logo_320{display:inline-block !important;}
}