Reputation: 9011
I have a four-column footer, which collapses into two columns on tablets, and one column on mobile devices.
The viewport metatag and stylesheets are as 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 and (max-width: 960px)">
<link rel="stylesheet" href="style/mobile.css" type="text/css" media="screen and (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 the screen size on desktop, as seen here:
However, on a mobile device, the footer columns appear as two columns, not one:
Here is the css from 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 is the css from 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 is the css from mobile.css
:
div#footer { padding: 10px; }
div.column {
width:100% !important;
float:none !important;
}
And finally the 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 I ensure that mobile devices display the formatting from mobile.css
, like it does when I simulate a mobile device on my desktop browser?
Update: The following, updated mobile.css
css code still results in two columns:
div.column {
width:100% !important;
float:none !important;
clear: both !important;
display: block !important;
}
Upvotes: 3
Views: 2472
Reputation: 4221
take off you float:none !Important
and it will work
try this for mobile CSS.
div#footer { padding: 10px; }
div#footer div.wrapper div.column {
width:100% !important;
}
Upvotes: 1
Reputation: 396
I've had weird issues with display: table-cell;
before. For the mobile css try reiterating the tablet styles and 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;
}
Upvotes: 1
Reputation: 3075
Add this to mobile.css
div#footer div.wrapper div.column {
display: block;
}
When you use display: table-cell it causes < div > to act like a < td > elements
Upvotes: 2