I am working with a custom theme in wordpress and I'm wanting to add certain formatting when viewing from mobile (320px min - 400 max)
Meta Tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
css:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.logo{margin-left:0px !important}
.content{width:100% !important; }
.mainmenu {background:rgba(0,0,0,0.6) !important; }
.mainmenu li{padding:0 5px !important;}
.mainmenu li a{font-size:18px !important; font-family:'impactregular' !important; color:#000 !important;}
}
@media only screen
and (min-width : 1000px) {
.logo{float:left;}
}
Now for some reason it detects the 1000px but not the smaller..not sure what I'm doing wrong here.
Here's a link to the site I'm trying to fix. Thanks in advance.
It will help you. Media Queries for standard devices.
And use it as your meta tag.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />