Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

Question

I have a Bootstrap 3 website, which looks well in IE, but Chrome and FF and a bottom slider and small place from the right side is always there even if I scale to 1 %.

This is something connected to box-sizing property however neither content-box no border-box works. And I cannot find out in inspect element what is there? If you can give me a direction to research - I would be very happy. Here is how it looks like:

enter image description here

Looks like the brown stripe is wider than everything else. Are you missing a `.container` or `.container-fluid` somewhere? — Tieson T., Aug 24 '14 at 00:33
I used to have containers but I removed it searching for this problem. Should I always use container? — Svitlana, Aug 24 '14 at 01:20
I am sorry, here is the live example, design on the home page is broken I tried to find this problem. https://torid-fire-6526.firebaseapp.com/#/ — Svitlana, Aug 24 '14 at 01:23
[https://torid-fire-6526.firebaseapp.com/#/](https://torid-fire-6526.firebaseapp.com/#/) — Svitlana, Aug 24 '14 at 01:23

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

0

It's hard to tell without actually visiting the site, but a straight forward fix would be to set set overflow: hidden; on the body property as so in your css file:

body {
    overflow:hidden;
}

You can see more information here on SO

edited May 23 '17 at 12:20

Community

1
1

answered Aug 24 '14 at 00:31

ham-sandwich

3,975
10
34
46

Thank you, yes - overflow-hidden solve the problem, but when you shrink the window size - it does what it suppose to do and cut the sizes, as I have min-height for content. BUT this is a GREAT direction to research further!!! Thank you! I used overflow-x:hidden. – Svitlana Aug 24 '14 at 01:14
I FOUND THE SOLUTION: .contentScroller {overflow-y: auto; visibility: hidden;} .content {visibility: visible;} – Svitlana Aug 24 '14 at 02:14

score 0 · Answer 2 · answered Feb 24 '15 at 17:15

Old question, I know, but I thought I'd offer my take on the "how to find what's wrong" aspect of the question for those who come after..

Open up the chrome devtools
Toggle 'mobile device emulation' - the little phone icon at the very top right of the devtools. The Chrome docs are super informative - I always find something new in there: Device Mode & Mobile Emulation
Shrink the width of your page; if there is any overflow, it will show as a dark grey shadow to the right of the 'emulation window'. Find a page width where this is obvious
In the Elements tab of devtools, select the top level elements one by one and hit delete, and see if the overflow is eliminated. If not, you can hit cmd+z to undo the deletion
When you find that deleting a high level element eliminates the overflow, narrow down to exactly which child element is causing trouble
When using bootstrap, incorrect nesting of row and column classes (which add and subtract margins / padding) can cause issues
Check for hardcoded widths, min-widths, !important statements,
Handy statements to try include overflow:auto;, float:none;, position: relative; - when in doubt: jiggle it!

Consider adding a breakpoint to refine the responsiveness of the troublesome element

<body>
    <header> <-- deleting header may solve the overflow
        <nav>
            <ul> <-- but a child is likely the problem
    <main>
        <section>
    <footer>
        <div>

Hope that helps someone in future :)

Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

2 Answers2