-
Notifications
You must be signed in to change notification settings - Fork 860
.main-wrap causing horizontal scrolling on breakpoints #1029
Comments
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. |
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.
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. |
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 ) |
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. |
Hi @viktoras, is everything working out as it should now? Please don't forget to close the issue if it's resolved. Thanks |
Based on the comments above, I assume this issue is now fixed. |
.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.
The text was updated successfully, but these errors were encountered: