Question

On my current project I am in the process of building tablet and mobile versions of the site and am testing it within the browser at the different sizes, though I am coming across a problem when resizing the browser.

The current version of the site can be found at: http://beta.residencyradio.com

Basically whenever I resize the browser to check how it will look on the tablet for example, white space is rendered to the right and the x scrollbar appears, even though the width of the containing element has not been exceeded.

I can pretty much solve the issue by adding overflow: hidden but this disables x scrolling completely, which I don’t want.

I have tested this across all major browsers, all respond the same, so it must be to do with the CSS, what exactly I’m not too sure, but it’s probably something very simple that I’ve managed to miss.

Any help would be greatly appreciated!

Thanks in advance, Michael

Answer 1

That whitespace is being created because your #second div is being pushed outside the boundaries of the viewport. Instead of pushing that div using margin-left, use position:absolute; in its place to fix that issue.

This is how it is now:

#second .content {
    margin-left: 22.8125em;
}

The .content div has a width of 60em as it is.

You can use something like this instead and it should work fine:

#second .content {
    left: 170px; /* adjust to your liking */
    position: absolute;
    width: auto;
}