CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AirbusAi342
AirbusAi342

Reputation: 11

Bootstrap v3.3.0 Columns Too Wide

I've been really frustrated over the issue, searched many options, found none to work, and do not have the heart to ponder over it further.

The website in question is https://flix-c9-airbusai342.c9.io/.

Here, I'm having issues with the columns being too wide in mobile. Yes, they are properly stacking, however, not sure what's causing it to be too wide.

Below is a direct snippet of the code of the area in question. The class .stats is onlybackground-color: #D8D8D8; for changing background color.

<section class="stats">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-code fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Professional Coding</h2>
            <span class="text-muted"><p>A team of experienced web developers are ready to give you the best quality code available to be provded for you. <b>Each</b> and <b>every</b> time.</p></span>
        </div>
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-bolt fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Dedicated Team</h2>
            <span class="text-muted"><p>Nothing's perfect. Even us. Thus, our dedicated team is ready to help you whenever you need it, even if it means sacrificing leasure time.</p></span>
        </div>
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-mobile fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Mobile compatible</h2>
            <span class="text-muted"><p>We know the new trends of websites. Meeting popular demand, our websites by default look great on any device across. Even this website.</p></span>
        </div>
    </div>
</div>

I openly allow you to view the page source of the website.

Thank you for any assistance; my dull mind is suffering. :)

Upvotes: 0

Views: 4661

Answers (1)

chdltest
chdltest

Reputation: 873

You have a min-width of 960px on your .section

Removing that will solve a lot of things. If you do not want your content to stretch to the full width of the window, use a max-width: 960px; instead. Otherwise, just remove the min-width of 960px

Remove .row-fluid and use .row.

Remove align="center" that's old stuff

Use .text-center on the parent of the stuff you want centered (provided it's inline or inline-block elements)

Use .center-block on any block elements (like an .img-responsive).

Upvotes: 3

Related Questions