Bootstrap vertical scroll is not smooth

Problem

After applying this: (to fix extra space on the right):

html {
  width: auto !important;
  overflow-x: hidden !important;
}
body {
  width: auto !important;
  overflow-x: hidden !important;
}

the vertical is no longer smooth, and sometime is stuck with the addressbar (for mobile devices). is there a way to fix the vertical scroll?

im using bootstrap 3.1

Thanks.

Problem courtesy of: Clint Angelo 'Tec' Mercado

Solution

Please check height definitions if there are any. Usually that's what causes a sticky vertical scroll in my experience.

Also, "extra space to the right" means you have defined widths "width:300px;" instead of percentages that are causing overflow, you should address these instead of trying to play around with the html/body.

Try inspecting elements until you find which element is causing your page to overflow, and change it's width to fit on a mobile screen, or convert it to a percentage of the total width of the screen so that it scales nicely.

If you give us more code, maybe even a website link we can give you a better answer, but you should never have to hide overflow, use auto width or overuse !important tags like that on the html/body.

Solution courtesy of: christoshrousis

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.