Twitter Bootstrap 3 Horizontal Scrolling Issue

Question

Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.

Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:

@media (max-width: 767px) {
    .container {
         padding-right: 0;
         padding-left: 0;
         margin-right: auto;
         margin-left: auto;
    }
}

Here's the staging site I'm working off of: http://www.kesernio.com/playground/

Have you used the img-responsive class on each image? – Adam 'Sacki' Sackfield Oct 12 '13 at 18:13 — Adam 'Sacki' Sackfield, Oct 12 '13 at 18:13
Doesn't matter i can see you have! – Adam 'Sacki' Sackfield Oct 12 '13 at 18:14 — Adam 'Sacki' Sackfield, Oct 12 '13 at 18:14

score 0 · Accepted Answer · edited May 23 '17 at 12:07

I wonder if changing the padding helps to set the images 100% in the first place. The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero ) In your case remove the padding of your col-- with images.

<div class="container" style="background-color:green;">
        <div class="row">
            <div class="col-xs-12 contact">
        content
            </div>
        </div>
    </div>
</div>

About your scrollbar, in fact you do this:

<div class="container" style="background-color:green;padding:0">
    <div class="row">
        <div class="col-xs-12 contact">
    content
        </div>
    </div>
</div>

add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides. To remove the scrollbar set the margin of the .row to zero to:

<div class="container" style="background-color:green;padding:0">
    <div class="row" style="margin:0">
        <div class="col-xs-12 contact">
    content
        </div>
    </div>
</div>

See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids

Twitter Bootstrap 3 Horizontal Scrolling Issue

1 Answers1