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