Columns Block – Stack on Mobile: how to change breakpoint?

When using the Columns block with “Stack on mobile” turned on, the columns stack at 781px. I need to increase this to 834px so that the columns stack on tablets in portrait mode too.

Hi @chrisbegley the breaking points are determined by the theme you are using. Are you able to share a link to your page with the column block, alternatively, if you are using one of the default twenty * you can share the name of the theme.

@thelmachido thanks! I’m using the Spectra One theme, but I was able to get it working by adding custom CSS classes and CSS:

.columns-chris {
	display: inline;
}

@media (max-width: 834px) {

	.columns-chris {
	flex-wrap: wrap !important;
}
	
	.column-post-chris {
	flex-basis: 100% !important;
}

	.column-side-chris {
	flex-basis: 100% !important;
}
}

Not sure if this is the best way, but it worked!

Hi @chrisbegley thanks for the update, I was always going to check if its possible to do it with CSS. I am glad you managed to sort that out, I will mark this issue as resolved.

For the sake of accuracy, and to help any future searchers, the columns breakpoint in Gutenberg is not determined by your theme, rather it is aggressively hard coded into Gutenberg core styles, with overly specific selectors and improper uses of !important.

If you want a custom breakpoint, you will need to override all of the .wp-block-columns css you find in /wp-includes/css/dist/block-library/style.min.css

Some pre-made themes might do this already.

Exactly what I was looking for, thanks! I Just needed to set a custom breakpoint for columns with a just giving widget to stop overflow. I’m using the astra (pro) theme and managed to get this working by applying a custom css class of ‘donate-columns’ to the columns block and adding the following (slightly simplifed) code:

/*Set custom breakpoint for just giving donation columns */
@media (max-width: 982px) {
.donate-columns {
flex-wrap: wrap !important;
flex-basis: 100% !important;
}