CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 817

White space appearing after browser resize

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

Upvotes: 3

Views: 11537

Answers (5)

ah2140
ah2140

Reputation: 1

Tried 

html {
overflow-x:hidden;
}

didn't work. But..

body {
overflow-x:hidden;
}

Did.

Upvotes: 0

Dragutescu Alexandru
Dragutescu Alexandru

Reputation: 175

I usually fix it with 

 html {
  overflow-x:hidden;  
 }

It should work and hide the white space and rescale the site

Upvotes: 0

Con Antonakos
Con Antonakos

Reputation: 1789

I did the following:

html, body {
    width: 100%;
    display: table;
}

And it removed the weird whitespacing while also allowing to scroll in the x-direction.

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75409

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;
}

Upvotes: 1

d-_-b
d-_-b

Reputation: 23211

I think....

change in your css file:

from:

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
}

to 

html {
font-size: 16px;
overflow-y: scroll;
background: url("../images/bkgMAIN.jpg") repeat-y;
    background-size:100% 100%;
}

It looks like that image (with the cool gradient) isn't stretching horizontally when the page is zoomed out

Is this it?

Upvotes: 0

Related Questions