Vertical scrollbar issue

Question

I am playing with bootstraps v2.3.2 now. media queries (I do not use a bootstrap grid, only these 4 media queries) to test them on mobile and tablet devices, and I notice that I continue to receive a horizontal scroll bar, and I don’t understand why?

Basically, I have one div and this CSS:

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body{ margin:0; /* height: 3000px; */ /* forced vertical scrollbar */ height: 300px; } div{ padding: 0 10px; margin: 0 auto; background: aqua; width: 980px; border: 1px solid black; height: 100%; } /* Large desktop */ @media (min-width: 1200px) { div{ background: red; width: 1200px; } } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { div{ background: yellow; width: 768px; } } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { div{ background: blue; width: 100%; } } /* Landscape phones and down */ @media (max-width: 480px) { div{ background: green; } } 

---

The situation when I click the vertical scrollbar: JSBin

But when I do not force the vertical scrollbar, I get the desired result: JSBin

---

Thus, this is evident thanks to the vertical scrollbar. I found this article about the scroll problem in Recurrent Web Design, but I get the same result in both Chrome and FF.

---

Update : how to watch bootstrap v3.3.2 source . I noticed that they have new media queries, however they do not use the minimum possible width for .container . These are their media queries:

 @media (min-width: 768px) { .container { width: 750px; /* 18px difference */ } } @media (min-width: 992px) { .container { width: 970px; /* 22px difference */ } } @media (min-width: 1200px) { .container { width: 1170px; /* 30px difference */ } } 

And here is JSBin . Even when I made the vertical scrollbar appear, it will not cause the horizontal scrollbar.

But if I want to use the minimum possible width for media queries, for example:

 @media (min-width: 768px) { .container { width: 768px; } } @media (min-width: 992px) { .container { width: 992px; } } @media (min-width: 1200px) { .container { width: 1200px; } } 

This will call horizontal scrollbar - JSBin

Did the bootstrap guys do it on purpose, because there might be a vertical scrollbar?

---

Question Why can't I use the smallest possible width in a media query when there is a vertical scrollbar?

I know this may be a newbie, but I would appreciate it if someone clarified this for me.

Answer 1

Bootstrap boot requests

Media request setup

Bootstrap supports four media formats:

Phones & 768px (8 inches) Tablets ≥ 768px Desktop Computers ≥ 992px (10.33 inches) Desktop Computers ≥ 1200px (12.5 inches)

These are not fixed sizes!

If you have a screen that has a minimum width of 768 pixels, a media query should be triggered.
However, setting the container to 768px will almost always lead to a screen overflow

First of all, the body element for all modern browsers has an advantage. For example: Webkit browsers: body {margin: 8px;} , so if your element is 768px and margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px, this will make it overflow (as it should be). This says bootstrap sets: body {margin:0;}

Another example would be a border. Border adds size to your element if box-sizing not the default. While the outline sets the border inside your element.

Did the guys from bootstrap do this on purpose, because of the possibility that there might be a vertical scrollbar ?

There is such a possibility, but I think they installed it because there is a bunch of css property that affects the size, so they gave an error, so to speak, to avoid strange behavior like the appearance of a horizontal scrollbar.

Question: Why can't I use the smallest possible width in a media query when there is a vertical scrollbar?

You can use it: Fiddle! Just remember that some browsers will display it with a specific width.

Answer 2

Fiddle https://jsfiddle.net/YameenYasin/as4Lmgas/1/

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body{ margin: 0; } div { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background: blue; height:auto; min-height:300px; // For testing purpose only } @media (min-width: 768px) { div { width: 750px; background: silver; } } @media (min-width: 992px) { div { width: 970px; background: yellow; } } @media (min-width: 1200px) { div { width: 1170px; background: red; } } <div></div>