How to prevent horizontal scrolling on responsive webpage?

Question

I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.

I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.

Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?

Answer 1

I had the same problem, and applied this to fix it:

body {     overflow-x: hidden !important; } .container {     max-width: 100% !important;     overflow-x: hidden !important; } 

To expand a bit, I only had the problem on mobile phones, so this is my final code:

@media screen and (max-width: 667px) {     body {         overflow-x: hidden !important;     }     .container {         max-width: 100% !important;         overflow-x: hidden !important;     } } 

I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.

Answer 2

i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.