Skip to content

Commit

Permalink
Fix single column block display for smaller screens. (#26438)
Browse files Browse the repository at this point in the history
If there is only one column, don't force a 50% flex-basis for small screens.
  • Loading branch information
aaroncampbell authored Oct 29, 2020
1 parent 3f535db commit 818b280
Showing 1 changed file with 8 additions and 5 deletions.
13 changes: 8 additions & 5 deletions packages/block-library/src/columns/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@

// Between mobile and large viewports, allow 2 columns.
@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
// As with mobile styles, this must be important since the Column
// assigns its own width as an inline style, which should take effect
// starting at `break-medium`.
flex-basis: calc(50% - 1em) !important;
flex-grow: 0;
// Only add two column styling if there are two or more columns
&:not(:only-child) {
// As with mobile styles, this must be important since the Column
// assigns its own width as an inline style, which should take effect
// starting at `break-medium`.
flex-basis: calc(50% - 1em) !important;
flex-grow: 0;
}

// Add space between the multiple 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.
Expand Down

0 comments on commit 818b280

Please sign in to comment.