horizontal scrolling
slavikse opened this issue ยท 22 comments
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>
Thanks, container
needs to be fixed. container-fluid
should work. Are you needing static sizes?
I have the same issue. Even using only a row
without a container
.
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.
Any updates on this one?
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!
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-12
s. Changing to justcol-xs
for some of them fixed this one - I had some fixed width items inside of a
col-xs
that was also arow
, 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 therow
class and just fully styling that inner flexbox myself fixed this one.
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.
Some update about this? Very simple things are affected now. :(
I have the same issue.
I've discovered that removing the negatives margins on the row class fixes the issue.
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.
for me adding:
padding-left: 15px;
padding-right: 15px;
to .container fixed the problem.
I saw bootstrap 4 is using it in their flexbox grid, why won't you?
Fixed using a wrapper :
.container { padding: 1rem; }
Then the structure should be :
container
row
column
Are there any updates on this?
Is there any update on this?
abandoned?
@stephantabor your solution gets me the closest
Fixed in forked flexboxgrid2.
@evgenyrodionov mind opening a PR here? or linking to commit sha w fix
@sazad2 this project looks abandoned, so I decided to fork it. Switch to flexboxgrid2.
I have this problem when normalize.css has been added, it exists a solution?
this solution worked for me when I added this line in body overflow-x: hidden; I do not know if it is the most recommended?
On mobile if you don't need gutter simply a
.row{ margin: 0; } [class^="col-"], [class*=" col-"]{ padding: 0; }