CODEWITHSUNDEEP
htmlcssmobileresponsive-design
Ben
Ben

Reputation: 9011

Responsive columns not displaying correctly on mobile device

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

Answers (3)

Josh Stevens
Josh Stevens

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

enter image description here

Upvotes: 1

Tofu Warrior
Tofu Warrior

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

Keammoort
Keammoort

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

Related Questions