Opened 3 years ago
Closed 2 years ago
#53643 closed defect (bug) (fixed)
Twenty Twenty: "Wide line" separator breaks inside columns.
Reported by: | kjellr | Owned by: | audrasjb |
---|---|---|---|
Milestone: | 6.1 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch has-screenshots commit |
Focuses: | css | Cc: |
Description
The "Wide line" separator style in Twenty Twenty breaks outside of its container when placed inside of a column. I expect it would max out at the column width like it does in Twenty Twenty-One or Twenty Nineteen. This happens on the front-end, and also in the editor.
To Reproduce:
- Add a columns block with a few columns in it.
- Add a separator block into one of the columns.
- Set the separator to use the "Wide line" style.
- Observe the overflow issue.
Screenshots:
(Additionally, the separators don't show up in the preview, but I've seen that happen in many themes, so I don't think it's specific to Twenty Twenty).
Other themes, for reference:
Twenty Twenty-One:
Twenty Nineteen:
Tested with Twenty Twenty v1.7
WordPress v5.7.2
Gutenberg v11.0.0
Attachments (3)
Change History (9)
#1
@
3 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
#3
@
2 years ago
- Focuses css added
- Keywords has-patch added; needs-patch removed
- Milestone changed from Future Release to 6.1
r53459 seems to have fixed the width and overflow in the editor, but that still leaves the front-end.
At 1280 pixels and wider, the separator's width
and max-width
were both 120rem. One of those needs to be 100%, and I chose to change the width
. (The width
is already set to 100%, so simply removing the fixed value at the breakpoint is another option.)
@
2 years ago
Before patch: Wide line separators inserted inside columns are overflowing their container
This also happens without columns. To reproduce the bug it's enough to add a paragraph and a separator with the style "wide".