Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

.main-wrap causing horizontal scrolling on breakpoints #1029

Closed
viktoras opened this issue Aug 8, 2017 · 6 comments
Closed

.main-wrap causing horizontal scrolling on breakpoints #1029

viktoras opened this issue Aug 8, 2017 · 6 comments

Comments

@viktoras
Copy link

viktoras commented Aug 8, 2017

.main-wrap + .fullwidth cause a horizontal bar below $global-width, haven't tested with sidebars.

An issue with margin calculations based on the XY Grid? I noticed that _content.scss is based upon XY Grid fully.

@linuxbastard
Copy link
Contributor

Hi,

I used a page with the full-width page template and even tried it with the kitchen sink template, but I am not seeing a horizontal scroll bar in my default 1200px max width page. Can you give us more details on what you were trying to do when you got the horizontal scroll bar?

You can start troubleshooting the page by checking inspector and see if there are any elements on your page that are bigger than 1200px (or your global max-width) causing the horizontal scroll bars to appear.

@viktoras
Copy link
Author

viktoras commented Aug 8, 2017

I checked a bit more:

The issue starts when the viewport is 1225px.

While inspecting, no container or other structural section/div has a bigger size than the viewport.

Upon further inspecting, I see that the problem might be with .main-content as with its margins disabled, on various breakpoints, the horizontal bar disappears.

.main-wrap.full-width .main-content {
width: calc(100% - 1.11111rem);
margin-right: 0.55556rem;
margin-left: 0.55556rem;
}

Does that calculation seem to be failing only to me? Now I'm not sure if this is getting into Foundation territory.

I haven't changed gutters or anything like that. Via _settings.scss, I have only set a different global-font-size, although changing it back to 100% doesn't resolve anything.

@linuxbastard
Copy link
Contributor

linuxbastard commented Aug 8, 2017

I've tried it and even if I set my margins to crazy sizes on both main-content and the inner divs I'm not getting scrollbars. Please check that your .main-content isn't getting any extra styling like overflow: auto or something like it.

Also try margins at .0.55555625rem ( 8.8889px / 16px )

@viktoras
Copy link
Author

viktoras commented Aug 8, 2017

This is quite bizarre, overflow: hidden on .main-content does the trick.

I'm starting to think this is an XY-Grid issue. I haven't added any extra styles to content related classes at all.
I'll do a fresh install to test this again. Thanks for your help 👍

@linuxbastard
Copy link
Contributor

Hi @viktoras, is everything working out as it should now? Please don't forget to close the issue if it's resolved.

Thanks

@olefredrik
Copy link
Owner

Based on the comments above, I assume this issue is now fixed.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants