Search code examples
cssmedia-queriesphpbb3

Why won't my media query work?


I am being asked to have this forum's slogan "Powering the safety revolution" disappear when the screen width gets into iPad range. For testing I am using 750 pixels for the screen width. At or below that, I want it to disappear.

http://brightideasforum.unitedsafety.net/phpbb3

The code is there but display:none does not take effect when I drag the screen size under 750 pixels.

This is a phpBB 3.0 forum. I have refreshed the templates and the theme, purged the cache, purged my browser cache.

CSS is here:

http://brightideasforum.unitedsafety.net/phpbb3/style.php?id=2&lang=en

Applicable CSS:

#powering-top{
    height:auto; 
    float:right; 
    clear:both;
}
#powringbox-box {
    color: #000;
    position: relative;
    margin-right: 5px;
    margin-top:0px;
    display: block;
    float: right;
    text-align: right;
    white-space: nowrap; /* For Opera */
}
#powringbox-box h2{
    float:right;
    margin-right:0px !important;
}

@media only screen and (max-device-width : 750px) {
    #powringbox-box {
        display: none;
    }

Solution

  • Use max-width instead of max-device-width.

    As @showdev commented above, using max-width is more appropriate for your situation (and most situations). Unless you actually care what size my monitor is, regardless of your BROWSER window size, max-device-width is not going to help.