Responsive website: How to get rid of horizontal scroll bar?

Question

I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you 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 it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:

full.css

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

responsive.css (less than 1000px)

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

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

Answer 1

Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.

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