Skip to content

Commit

Permalink
This change reinstates the tablet breakpoint CSS for the columns bloc…
Browse files Browse the repository at this point in the history
…k from #37436 which forces 2 columns rather than a total stack
  • Loading branch information
ramonjd committed May 18, 2022
1 parent 14c0c1d commit 4a0573e
Showing 1 changed file with 13 additions and 1 deletion.
14 changes: 13 additions & 1 deletion packages/block-library/src/columns/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,24 @@
}

&:not(.is-not-stacked-on-mobile) > .wp-block-column {
@media (max-width: #{ ($break-medium - 1) }) {
@media (max-width: #{ ($break-small - 1) }) {
// Responsiveness: Show at most one columns on mobile. This must be
// important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
}

// Between mobile and large viewports (tablet), allow 2 columns.
@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
// 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% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
flex-grow: 1;
}
}

// At large viewports, show all columns horizontally.
@include break-medium() {
// Available space should be divided equally amongst columns without an
Expand Down

0 comments on commit 4a0573e

Please sign in to comment.