i have four-column footer, collapses 2 columns on tablets, , 1 column on mobile devices.
the viewport metatag , stylesheets follows:
<link rel="stylesheet" href="style/main.css" type="text/css" media="screen"> <link rel="stylesheet" href="style/tablet.css" type="text/css" media="screen , (max-width: 960px)"> <link rel="stylesheet" href="style/mobile.css" type="text/css" media="screen , (max-width: 640px)"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width"> the responsiveness works fine when changing screen size on desktop, seen here:
however, on mobile device, footer columns appear 2 columns, not one:
here css main.css:
div#footer div.wrapper div.column { float: none !important; display: table-cell; width:25%; box-sizing:border-box; padding: 0 10px; border-right: 1px solid rgba(255,255,255,0.1); } here css tablet.css:
div#footer { padding: 10px; } div#footer div.wrapper div.column { width:50%; margin-bottom: 20px; border: none; float: left !important; } div#footer div.wrapper div.column:nth-child(3) { clear:both; } ...and here css mobile.css:
div#footer { padding: 10px; } div.column { width:100% !important; float:none !important; } and html (with placeholder text):
<div id="footer"> <div class="wrapper"> <div class="column"> <h4>important links</h4> <ul> <li><a href="/">homepage</a></li> <li><a href="/privacy">privacy policy</a></li> <li><a href="/terms">terms of use</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> <div class="column"> <h4>important links</h4> <ul> <li><a href="/">homepage</a></li> <li><a href="/privacy">privacy policy</a></li> <li><a href="/terms">terms of use</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> <div class="column"> <h4>important links</h4> <ul> <li><a href="/">homepage</a></li> <li><a href="/privacy">privacy policy</a></li> <li><a href="/terms">terms of use</a></li> <li><a href="/contact">contact us</a></li> </ul> </div> <div class="column" style="border-right: none;" > <h4>header</h4> <p>lorem ipsum dolor sit amet</p> </div> <div style="clear:both;"></div> </div> </div> how can ensure mobile devices display formatting mobile.css, when simulate mobile device on desktop browser?
update: following, updated mobile.css css code still results in 2 columns:
div.column { width:100% !important; float:none !important; clear: both !important; display: block !important; }
i've had weird issues display: table-cell; before. mobile css try reiterating tablet styles , display: block;
div#footer { padding: 10px; } div#footer div.wrapper div.column:nth-child(3) { width:100% !important; float:none !important; clear: both; display: block; } 
Comments
Post a Comment