New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout goes full-width with horizontal scrollbar when browser window maximised #853

Open
mikeprince opened this Issue Mar 15, 2017 · 1 comment

Comments

Projects
None yet
2 participants
@mikeprince

mikeprince commented Mar 15, 2017

See support thread https://wordpress.org/support/topic/layout-goes-full-width-with-horizontal-scrollbar-when-browser-window-maximised/ for discussion and screencast to illustrate issue.

The grid layout goes full-width and a horizontal scrollbar appears as the footer width is too wide (by two pixels) when the browser window is resized such that the page body is between 1183-1189px, when the container div width becomes 1170px. At other times the container is constrained to 940px centred.

@eri-trabiccolo

This comment has been minimized.

Show comment
Hide comment
@eri-trabiccolo

eri-trabiccolo Mar 15, 2017

Contributor

Hi there,
thanks for reporting this.

The "full-width" thing:
It depends on the bootstrap version upon which the theme is build, which says that the .container element's width (e.g. #main-wrapper class) for viewport's widths greater than 1200px must be 1170px.

Given a vertical scrollbar of around 15-17px (it depends on the browser), so the actual width of the body when the viewport's width is e.g. 1200px would then be 1200-17 = 1183 => 1183-1170 = 13px.
So basically you can see something the grid (or even a single post etc.) with just 13/2 px on blank space on the left and 13/2px on the right.

A rapid solution might be:

@media screen and (min-width: 1200px) and (max-width: 1230px) {
 .container, .span12 {
     width: 1150px;
 }
}

This can be considered as an enhancement, but needs some tests as it impacts on several elements

  • Horizontal scrollbar appearing
    Even if the above solution fixes this too, what causes the scrollbar appearing is the footer colophon
    In this case:
.colophon .container {
    max-width: 100%;
}

This should be fixed.

Thanks

We'll work on it, mostly on the second issue ;)

Contributor

eri-trabiccolo commented Mar 15, 2017

Hi there,
thanks for reporting this.

The "full-width" thing:
It depends on the bootstrap version upon which the theme is build, which says that the .container element's width (e.g. #main-wrapper class) for viewport's widths greater than 1200px must be 1170px.

Given a vertical scrollbar of around 15-17px (it depends on the browser), so the actual width of the body when the viewport's width is e.g. 1200px would then be 1200-17 = 1183 => 1183-1170 = 13px.
So basically you can see something the grid (or even a single post etc.) with just 13/2 px on blank space on the left and 13/2px on the right.

A rapid solution might be:

@media screen and (min-width: 1200px) and (max-width: 1230px) {
 .container, .span12 {
     width: 1150px;
 }
}

This can be considered as an enhancement, but needs some tests as it impacts on several elements

  • Horizontal scrollbar appearing
    Even if the above solution fixes this too, what causes the scrollbar appearing is the footer colophon
    In this case:
.colophon .container {
    max-width: 100%;
}

This should be fixed.

Thanks

We'll work on it, mostly on the second issue ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment