Responsive website: How to get rid of horizontal scrollbar?

Question

I am currently creating a responsive website. I noticed that there is a problem with the empty space on the right when scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden . But it will not work on mobile devices such as iPhone and iPad.

So, I tried to add min-width , because this will help get rid of empty space. But I cannot put min-width in full.css (e.g. min-width:1000px; ) because it will be set to full width - see the example below:

full.css

 #wrapper { width: 1000px; margin: 0 auto; } 

responsive.css (less than 1000 pixels)

 #wrapper { width: 100%; margin: 0; } 

I was wondering if you know how to fix this problem? Let me know if you have a better option for this. Or should I create a new wrapper id?

Answer 1

Referring to your problem, the code looks correct. However, some elements inside may also affect the exact width and overflow your border. It is also possible to check all internal elements. You can use Firebug or Chrome Inspect Element.

Answer 2

From time to time I have this problem, and most of the solution to the problem is to identify the element that is the culprit. I just came up with this little jQuery script that you can run in the JavaScript browser console to find out which elements are wider than the body width, causing an annoying scrollbar to appear.

 $.each( $('*'), function() { if( $(this).width() > $('body').width()) { console.log("Wide Element: ", $(this), "Width: ", $(this).width()); } }); 

Answer 3

You can hide the horizontal overflow using css code (and then the horizontal scrollbar will never appear again):

 body{ overflow-x:hidden; } 

Answer 4

Link to the page? Most likely, there is some element inside the shell that breaks through the browser window.

Often this happens with padding and width. Keep in mind if you have an element inside the wrapper that is set to 100% width and you add padding to the left and right of 20 pixels. It will create a horizontal scrollbar because the item is 100% + 40 px.

So, if you are building fluid elements inside a div, you would do it like this:

 #liquidelement { width:96%; padding:0 2%; } 

You need to subtract the indentation from the width, and also always use percentages for laying when performing layouts, because they are fluid and not fixed.

Answer 5

No more than three steps are required here:

• Scroll the horizontal bar to the right, where you will see an additional blank add-on.
• Open validation item

This is done by holding ctrl + shift , then pressing i

3. Scroll through all your elements, an element with an additional addition should display the contents of your pages in this free space.