Responsively Center Sidebar On Mobile

On a tablet or laptop, a post and sidebar will appear with the post either left or right while the sidebar will be the opposite. For example:

Sidebar | Post

… or …

Post | Sidebar

The trouble is with mobile – the post in example one or the sidebar in example two will appear left-aligned, when I want them center-stacked. I can’t give each of them a width of 100% – even though on mobile, that is what I would want.

I did try a few techniques with centering divs; for an example I thought I could use a responsive div approach with the post or sidebar like this:

<div class="row">
    <div class="col-xs-12 col-md-8"><!-- POST --></div>
    <div class="col-xs-6 col-md-4">
        <div class="col-md-2"></div>
        <div class="col-md-8"><!-- SIDEBAR --></div>
        <div class="col-md-2"></div>
    </div>
</div>

… or vice versa where the post is centered with the sidebar on top. In both cases, on mobile, the centered div (col-md-8) is still left aligned.

Just to visualize the goal, on a laptop or tablet, it would appear like:

Sidebar | Post

or

Post | Sidebar

On a mobile, it would appear like:

Sidebar-Centered
Post-Centered

Read more here: Responsively Center Sidebar On Mobile

Leave a Reply

Your email address will not be published. Required fields are marked *