Skip to content

Instantly share code, notes, and snippets.

@davidallenlewis
Last active May 1, 2019 13:55
Show Gist options
  • Save davidallenlewis/bf5396e61ebc0a8e889ceff90a167789 to your computer and use it in GitHub Desktop.
Save davidallenlewis/bf5396e61ebc0a8e889ceff90a167789 to your computer and use it in GitHub Desktop.
/* Override Gutenbergs asymeteical column margins with the negative margin trick */
.wp-block-columns {
margin: 0 -20px;
}
.wp-block-columns .wp-block-column {
margin: 0 0 20px 0;
padding: 0 20px;
}
/* Override Gutenberg style that kills flex-wrap below 782 */
@media (min-width: 782px) {
.wp-block-columns {
flex-wrap: wrap;
}
}
/* Our own responsive column sizings at various breakpoints */
@media (min-width: 960px) {
.wp-block-columns.has-3-columns .wp-block-column {
flex-basis: 50%;
}
}
@media (min-width: 1080px) {
.wp-block-columns.has-3-columns .wp-block-column {
flex-basis: 33.33%;
}
}
@davidallenlewis
Copy link
Author

Gutters should probably be a relative unit. I just use 20px to keep it simple.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment