CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Matt Cooper
Matt Cooper

Reputation: 2062

Bootstrap Columns not Centered on Mobile

I am using Bootstrap for a simple landing page for my personal site. I have a row of contact buttons along the bottom which I am aligning with columns. The setup I have works great on desktop, but on mobile (I'm using an iPhone 5) the buttons are shifted a bit to the right. I've tried different breakpoint sizes and offsets for the columns, but I can't seem to get them to align correctly on both desktop and mobile.

Here's my site

Upvotes: 1

Views: 917

Answers (1)

APAD1
APAD1

Reputation: 13666

Expanding on my comment above, if you wanted to keep the same layout on desktop, you could change the structure of the buttons to span 3 columns on mobile and 2 columns on anything above that:

<div class="row" id="contact">
    <div class="col-xs-3 col-sm-2 col-sm-offset-2">
        <a href="mailto:[email protected]" target="_top"><img class="contactImg" alt="email" src="images/email.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://www.linkedin.com/profile/view?id=282192735"><img class="contactImg" alt="LinkedIn" src="images/linkedin.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://facebook.com/mattjcoop"><img class="contactImg" alt="Facebook" src="images/facebook.png"></a>
    </div>
    <div class="col-xs-3 col-sm-2">
        <a href="https://twitter.com/TheMattyCoops"><img class="contactImg" alt="Twitter" src="images/twitter.png"></a>
    </div>
</div>

Upvotes: 2

Related Questions