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!
@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.
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