horizontal scrolling - Githubissues

slavikse commented 8 years ago

By reducing the width of the screen: 780px 1030 px 1220 px appears horizontal scrolling. When using normalize.css to a width of 800px there is a constant horizontal scrolling. code:

<div class="container">
  <div class="row">
    <div class="col-xs-4">txt</div>
    <div class="col-xs-4">txt</div>
    <div class="col-xs-4">txt</div>
  </div>
</div>

kristoferjoseph commented 8 years ago

Thanks, container needs to be fixed. container-fluid should work. Are you needing static sizes?

ArnaudValensi commented 8 years ago

I have the same issue. Even using only a row without a container.

nicolasartman commented 8 years ago

Yep, both container classes seem to have their calculations slightly off so there's a horizontal scroll for at least 30px at each responsive breakpoint. Checked this using a barebones page like the code above and the CDN link to v6.3.0.

philippotto commented 8 years ago

Any updates on this one?

kristianwithak commented 8 years ago

For what it's worth, I can also confirm having horizontal scrolling on mobile with the use of .col-xs-12... also, I'm using only a containing .row, no .container, .container-fluid, or .wrap classes anywhere.

The .row class is applying the -1em margins, which widens the div beyond the left/right edges of the viewport, and the subsequent .col-[xx] columns have their padding of 1em.

Lookin' forward to any info on a fix, thanks!

stephantabor commented 8 years ago

Also experiencing this issue. For whatever reason my widths are off by 1em so i added a max width to the .container class and it solved my issue.

.container {
    max-width: calc(100% - 1em);
}

Another note, after doing that I experienced the problem again on two occasions.

Seemed to be related to having rows nested in col-xs-12s. Changing to just col-xs for some of them fixed this one
I had some fixed width items inside of a col-xs that was also a row, which i also added some flexbox css justify/align to. If I removed the fixed width of the flex children the problem resolved, but I needed the width. Removing the row class and just fully styling that inner flexbox myself fixed this one.

kristoferjoseph commented 8 years ago

Yeah, I have been experimenting with this a lot and have decided to use a different approach since a lot of people have run into issues. Will publish soon.

juniovitorino commented 8 years ago

Some update about this? Very simple things are affected now. :(

manuelmazzuola commented 8 years ago

I have the same issue. I've discovered that removing the negatives margins on the row class fixes the issue.

kristoferjoseph commented 8 years ago

This is a very common issue that has been talked to a bunch in previous closed issues.

I have been working on a fix that does not require the margin hack, but just so we are all clear the margin hack is needed for when you rely on flex-wrap to wrap row contents ( see flexboxgrid.com for an example ).

This was refactored by a PR to match the bootstrap-grid api which requires container as well as some normalizing or reset styling to work like bootstrap does.

I use a simple yet heavy handed reset which is probably why I have never had this issue.

You could also include whatever reset boostrap is using in the meantime.