Why won't my image display: none?

Hey all, this is hopefully a quick one and likely to be a typo, but I can’t see where the error is myself and I’m hoping some fresh eyes will help pick it out!

I’ve got an image:

<img class="hideable" src="http://placehold.it/369x42" alt="" title="mastheadimages" style="max-width:369px; max-height:42px; margin-bottom:0px;">

And I’ve applied this style to it:

@media only screen and (max-width: 480px) {
img[class=hideable]{
	display:none;
	}
}

…which should make the image disappear when the screen is less than 480px wide. Except it isn’t. I’ve applied this successfully to other images on the same page so I figure I’ve either got a typo somewhere that I’m missing, or there’s something particular about the context of this image tag that’s affecting it’s ability to display: none.

Thoughts?

Hi, cheli,

It works for me in IE9, FF, Chrome, and Opera. Doesn’t work in IE8.

Weird, it’s not working for me in Chrome.

Perhaps it is the context around the image tag after all.

Hi,

As Ron said the code above works fine so you may have a specificity issue somewhere. For example if you have more weight to a previous rule then the media query will be over-ruled. e.g.


.test .hideable { display:block }

Or you may just have a typo in your stylesheet causing a rule (or set of rules) to be ignored. A stray bracket can cause this so validate the html and css and find any typos first.

Thanks for the reminder to validate the code, @Paul O’B. I’ve validated it via W3C and made the changes it suggested to no effect. I then checked my styling and noticed this:


			.masthead img{
				display: inline-block;
			}

Until you reminded me I hadn’t clicked that applying the styling above would override my media query. Thanks for the lesson on inheritance. I really appreciate your help and this should teach me how to check for inheritance better in the future :slight_smile: