Blocks

Index

• Columns - Stack when nested
• Columns - Hide columns when empty
• Buttons - Change default border radius

---

Columns - stack at tablet breakpoint when nested

/*
 * Nested columns - wrap 
 * !important to override inline styles.
 */
@media (max-width: 1150px) {
    .wp-block-columns .wp-block-columns {
        flex-wrap: wrap !important;
    }
	
    .wp-block-columns .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        flex-grow: 1 !important; 
    }
}

---

Columns - hide column when empty

The columns block can be used to center content and make it narrower than the rest of the page, or to add space. The downside is that the empty columns can create unwanted space at smaller breakpoints.

You can work around this by only giving the columns that are empty a fixed width (px, % or otherwise), and leaving the width empty for the column that has content. Paired with this CSS, it will make the empty columns disappear at a certain screen size -- in this case, screens smaller than 900px:

@media (max-width: 900px) {
   .wp-block-column:empty {
      display: none;
   }
}

You may need to adjust the max-width depending on how the empty columns are being used.

---

Buttons - Change default border radius

There's an option to change the button block's border radius on a per-button basis, but it's not something you can easily change for other buttons. The default border radius is 5px.

This CSS covers all button-like elements from the theme and common blocks:

/* Buttons */
.wp-block-button__link, 
.wp-block-search__button,
/* class to make links 'buttony' */
.button, 
/* Mobile CTA */
.button.mb-cta,
/* Tertiary menu - only rounded by default in the Default theme */
.nav3 a,
/* standard button HTML tags */
button, 
input[type="button"],
input[type="reset"], 
input[type="submit"] {
  border-radius: 2px;	
}