-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Remove unintentional right-margin on last odd-item. #12199
Changes from 7 commits
89a9859
ce9ff9a
3930c4a
b28e9af
ace6ef4
3b812ba
66ed077
e8acfd0
7f5fe9d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,41 +10,37 @@ | |
} | ||
|
||
.wp-block-column { | ||
flex: 1; | ||
flex-grow: 1; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think this property is necessary since we are setting the width to 100% below. |
||
margin-bottom: 1em; | ||
|
||
// Responsiveness: Show at most one columns on mobile. | ||
flex-basis: 100%; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we change this to (content < width < flex-basis) |
||
|
||
// Beyond mobile, allow 2 columns. | ||
@include break-small() { | ||
flex-basis: 50%; | ||
flex-grow: 0; | ||
} | ||
|
||
// Prevent the columns from growing wider than their distributed sizes. | ||
min-width: 0; | ||
|
||
// Prevent long unbroken words from overflowing. | ||
word-break: break-word; // For back-compat. | ||
overflow-wrap: break-word; // New standard. | ||
|
||
// Add space between columns. Themes can customize this if they wish to work differently. | ||
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. | ||
@include break-small() { | ||
&:nth-child(odd) { | ||
margin-right: $grid-size-large * 2; | ||
} | ||
|
||
// Beyond mobile, allow 2 columns. | ||
flex-basis: calc(50% - #{$grid-size-large}); | ||
flex-grow: 0; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
// Add space between the 2 columns. Themes can customize this if they wish to work differently. | ||
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. | ||
&:nth-child(even) { | ||
margin-left: $grid-size-large * 2; | ||
} | ||
} | ||
|
||
@include break-medium() { | ||
|
||
// When columns are in a single row, add space before all except the first. | ||
&:not(:first-child) { | ||
margin-left: $grid-size-large * 2; | ||
} | ||
|
||
&:not(:last-child) { | ||
margin-right: $grid-size-large * 2; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
EDITED b/c my initial fix was wrong.
Column gutters are too narrow in editor view compared to frontend. I think you need to do
(2 * $grid-size-large) + $block-padding
here to account for the negative margins added by the editor. See #12816.