How to prevent horizontal scrolling on responsive webpage?
css, html, responsive-design, twitter-bootstrap
Solution
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.
Problem
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?