Website Has Strange Whitespace on Right Side of the Page When the Browser Is Resized to a Smaller Window

Website has huge whitespace on right side of the page and of the header when the page is resized to a smaller width

You have a lot of containers with hardcoded width in px.

Remove max-width: 1080px in .main-navigation, it's the container which cause the issue.

EDIT: and in div.nav-menu > ul

ul.nav-menu, div.nav-menu > ul {
   margin: 0;
   padding: 0 40px 0 0;
}

White space appearing after browser resize

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

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Entire website has white margin on its right side in Mobile view

Your viewport is scaled when you resize browser window, so adding user-scalable=0 will solve that problem. (at present when you press ctrl+0 it solves the issue)

Replace your viewport with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">

CSS padding to the right when window is resized smaller

In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.

Fixed CSS:

header { height: auto; margin: 0 auto; display: block;}

For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.

Tip: Right mouse-click the above image and view in new tab to see in original size.

Minimizing browser window in Firefox & Chrome adds white space to right of page

Well, you can float the two divs. Remove the width: 100% on the .navbar-header css first, then:

.navbar-header {
  float: left;
}

.navbar-collapse {
  float: right;
}

Hope this helps. Best.

---

Related Topics