Why won't my media query work?

Question

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;
    }

I believe `max-device-width` refers to the width of the device's actual screen, which won't change on any individual device. Instead, try using `max-width`, which refers to the width of the viewport and will change when the viewport is resized or orientation is changed, etc. The difference is [described here](http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web). — showdev, Mar 31 '15 at 18:05

score 2 · Accepted Answer · answered Mar 31 '15 at 19:10

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.

Why won't my media query work?

1 Answers1