The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.When looking at an article with a screen at 960px wide, we have a horiztonal scroll.
This can be fixed by setting the following at .two-columns .main .layout-content
.two-columns .main .layout-content {
flex: 1 1 75%;
}
instead of
.two-columns .main .layout-content {
flex: 0 0 75%;
}
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | before-after-flex-change.gif | 3.66 MB | lauriii |
| #3 | layout-content-d8.patch | 460 bytes | MaddieC |
Comments
Comment #2
MaddieC commentedComment #3
MaddieC commentedComment #4
markconroy commentedThis patch looks good to me. Thanks for contributing Maddie.
Comment #5
andrewmacpherson commentedThe patch doesn't reflect the issue summary. In the IS, there's no difference between the two code snippets.
Can you clarify that? Mark's RTBC can stand, but we don't want to confuse a committer :-)
Comment #6
markconroy commentedComment #7
lauriiiThis changes the width of these elements on wider screens. Here's a gif demonstrating the regression:
Comment #8
markconroy commented@lauriii
I realised that when we implemented it, but it fixes a much larger and uglier issue of the horizontal scrolling. The widths are just scaling because of the flex-grow: 1 (I think).
I'll ask @kjay what his thoughts on it are.
Comment #9
kjay commentedThe patch in #3 applies cleanly and removes the horizontal scrolling issue. Test in latest Firefox, Safari, and IE11.
The point made by @lauriii is correct, we are getting a slightly different ratio between the two columns on the wider screens however, we also have the main content column becoming wide enough at full size to result in the image being slightly upscaled. But I think this issue exists on the current version of Umami and will be more work to establish how we want to do a max-width type of column setup.
Note that if we were to remove the right margin from the aside, then our right hand column becomes wider and aligns better with the right hand side of the content in the header. This could be a follow up issue coupled with the main image upscaling if preferred.
Comment #10
markconroy commentedKeith
Do you want to mark this issue RTBC or do you want something else completed as part of this is?
Comment #11
lauriiiIndeed, the fix is correct but it just reveals another problem which is that the margin on the sidebar is not consistent with the margin on the header, which makes the elements unaligned. I looked at the original designs and the elements are aligned on those, so maybe we could open a follow-up to try to fix the problem.
Comment #12
kjay commentedAfter a little testing, I am placing this issue into RTBC because it fixes the horizontal scrolling issue described.
As noted, it does leave us with uneven column layout and I have created a related issue #3001660: Fix Umami's responsive layout styles to cover this. Having checked through the theme at various breakpoints, we have more to fix in terms of layout balance and responsive margins and they should be bundled together in a theme-wide fix.
Comment #15
lauriiiThanks for linking the follow-up issue.
Committed bf9da01 and pushed to 8.7.x. Also cherry-picked to 8.6.x. Thanks!