html - Responsive Design resizing on desktop, not on mobile -


i'm using media queries resize site elements based on width. developing , testing on desktop works perfectly, launched , tested on mobile (an iphone 5) not resize @ - displays @ full width.

i have searched around responses , general consensus seems to set viewport. have done — in header have:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

is there may have may overriding this?

my media queries this:

@media (min-width:320px) { /* smartphones, iphone, portrait 480x320 phones */      #rlanguage {position: relative; right:0; border:red solid 0px;}     #ix-nav {position: relative; right:0; border:red solid 01px;}     #infoemail {display:none}     #mainmenu {display:none}         #mobilemenu {display:inline}         #desktoponly {display:none;}                                 #menuspacing {width: 1px;}     #ix-footer {width: 100%; height:auto}     .greenmenuline {background:#000}                                 .rootvoices td.selected {padding: 0px;}     .rootvoices td.rootvoice {padding: 0px; width:10px} }   @media (min-width:481px) { /* portrait e-readers (nook/kindle), smaller tablets @ 600 or @ 640 wide. */      #rlanguage {position: relative; float:right; border:orange solid 0px;}     #ix-nav {position: relative; float:right; border:orange solid 0px;}     #infoemail {display:none}     #mainmenu {display:none}     #mobilemenu {display:inline}     #desktoponly {display:none;}     #menuspacing {width: 3px;}     #ix-footer {width: 100%; height:auto}     .greenmenuline {background:#000}                                 .rootvoices td.selected {padding: 0px;}     .rootvoices td.rootvoice {padding: 0px; width:0px} }  @media (min-width:681px) { /* portrait tablets, portrait ipad, landscape e-readers, landscape 800x480 or 854x480 phones */      #rlanguage {position: relative; float:right; border:yellow solid 0px;}     #ix-nav {position: relative; float:right; border:yellow solid 0px;}     #infoemail {display:none}     #mainmenu {display:inline}     #mobilemenu {display:none}     #desktoponly {display:none;}     #menuspacing {width: 2px;}     #ix-footer {width: 100%; height:auto}     .greenmenuline {background:#000}     .rootvoices td.selected {padding: 1px;}     .rootvoices td.rootvoice {padding: 1px; width:0px} }    @media (min-width:791px) { /* tablet, landscape ipad, lo-res laptops , desktops */      #rlanguage {position: relative; float:left; border:green solid 0px;}     #ix-nav {position: relative; float:left; border:green solid 0px;}     #infoemail {display:inline}     #mainmenu {display:inline}     #mobilemenu {display:none}     #desktoponly {display:none;}     #menuspacing {width: 12px;}     #ix-footer {width: 100%;  height:auto}     .greenmenuline {background:#000}     .rootvoices td.selected {padding-right: 10px; padding-left:10px;}     .rootvoices td.rootvoice {padding-right: 10px; padding-left:10px; width:12px} }   @media (min-width:1025px) { /* big landscape tablets, laptops, , desktops */      #rlanguage {position: relative; float:left; border:blue solid 0px;}     #ix-nav {position: relative; float:left; border:blue solid 0px;}     #infoemail {display:inline}     #mainmenu {display:inline}     #mobilemenu {display:none}     #desktoponly {display:inline;}     #menuspacing {width: 15px;}     #ix-footer {width: 100%;  height:auto}     .greenmenuline {background:#000}     .rootvoices td.selected {padding-right: 20px; padding-left:20px;}     .rootvoices td.rootvoice {padding-right: 20px; padding-left:20px; width:12px} }   @media (min-width:1281px) { /* hi-res laptops , desktops */      #rlanguage {position: relative; float:left; border:purple solid 0px;}     #ix-nav {position: relative; float:left; border:purple solid 0px;}     #infoemail {display:inline}     #mainmenu {display:inline}     #mobilemenu {display:none}     #desktoponly {display:inline;}     #menuspacing {width: 18px;}     #ix-footer {width: 100%; height:auto}     .greenmenuline {background:#99cc33}     .rootvoices td.selected {padding-right: 24px; padding-left:24px;}     .rootvoices td.rootvoice {padding-right: 24px; padding-left:24px; width:12px } 

thanks in advance!

set first @media min width 300px. iphone 5 around 314px , why media query not working.


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -