How to prevent horizontal scrolling on responsive webpage?

css disable horizontal scroll mobile
website horizontal scroll problem
how to remove horizontal scrollbar in bootstrap
find element causing horizontal scroll
how to disable horizontal scrolling css
how to remove scrollbar in mobile view
why horizontal scrollbar appearing
disable scroll css

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?

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.

How to prevent horizontal scrolling on responsive webpage?, Is there any way to get rid of that and keep my elements at 100%?. Should I use overflow:hidden? Disable horizontal scroll? Thanks! June 24  The two properties that do the work here are white-space: nowrap and overflow-x: auto. You need to make sure items don’t wrap otherwise, it will behave normally and allowing scrolling using auto means scrolling will be available when necessary. This small amount of CSS will make any area have horizontal scrolling.

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.

Responsive mobile site scroll issue, Ughck, accidental horizontal scrollbar, amiright? Node” feature of DevTools to remove stuff from the page until the scrollbar goes away. 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.

The "overflow: hidden;" style is the remedy not the prevention. If you want to prevent this you have to check your body elements which is larger than the body. It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap). So remove all padding and margin outside the container class.

Finding/Fixing Unintended Body Overflow, In HTML the scrollbar displays when the contents of an element overflow the size of the screen. This is not the case when content overflows its  DISABLE the Horizontal Scroll [closed] Asked 6 years, 4 months ago. Active 6 months ago. Viewed 336k times. Ok for some reason my webpage scrolls from left to right and shows a lot of ugly space. I have searched for results but they just made the scrollbar HIDDEN. That's now what I want, I want to physically DISABLE the horizontal scroll

Try to add (in the relevant @-rule) a max-width:

img {
    max-width: NNNpx;
}

That'll prevent img from being too wide.

Disable or Enable Horizontal or Vertical Scrollbar - CSS, Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example. body { overflow: hidden; /* Hide scrollbars */ }. Learn how to create a horizontal scrollable menu with CSS. The trick to make the navbar scrollable is by using overflow:auto and white-space: nowrap: Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars. Your message has been sent to W3Schools. W3Schools is optimized for learning, testing, and training.

How To Hide Scrollbars With CSS, prevent the page from scrolling horizontally on narrow screens #38. Closed A web search for "responsive tables" will provide a plethora of options. Demo and Code: http://jsbin.com/atarOxU/1/edit?html,css,output  I have used absolute positioning to center the text horizontally and vertically across the underlying image. The horizontal scrollbar seems to be coming from the following style: left: 50%; Is there any way to prevent the scrollbar while also maintaining the overlay text's position?

prevent the page from scrolling horizontally on narrow screens , Responsive or mobile-first sites use the horizontal “swiping” across I ask if they can think of a website scrolling horizontally. Avoid breaking convention just to stand out, or to solve a multiplatform-development challenge. The scrollbar appears because the content is too wide for your screen. Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.

Beware Horizontal Scrolling and Mimicking Swipe on Desktop, Hi All, I've read a few posts on this but it doesn't seem to be working for me. I'd like to disable Horizontal Scroll on both desktop and mobile on  A horizontal scroll bar means that the the site wasn't designed to be responsive (magic word that you should memorize). That's the shortest possible answer. That's the shortest possible answer. There are long threads about responsive design.

Comments
  • How can a CSS problem be solved without the CSS? Pastebin won't last forever.
  • check your code and syntax as per bootstrap's documentation, you might have somewhere placed row, container or cols wrongly
  • I tried doing what you recommended but wasn't sure where to look. Do you know where I should include it on the page: warm-chamber-7399.herokuapp.com
  • I attempted to include this max-width attribute but wasn't sure where to include it. Any advice given this page? warm-chamber-7399.herokuapp.com
  • I wasn't sure which image you were referring to in your answer.