@media (max-width:991px) {
.is-two-columns, .is-three-columns, .is-four-columns {
display: flex;
flex-wrap: wrap;
}
.is-two-columns .wp-block-column {
flex: 100% !important;
margin-left: 0;
}
.is-three-columns .wp-block-column {
flex: 100% !important;
margin-left: 0;
}
.is-four-columns .wp-block-column{
flex: calc(50% - 20px) !important;
margin-left: 0;
}
.is-four-columns .wp-block-column:nth-child(odd){
padding-right: 20px;
}
.is-four-columns .wp-block-column:nth-child(even){
padding-left: 20px;
}
}
@media (max-width:781px) {
.is-three-columns .wp-block-column {
flex: 100% !important;
margin-left: 0;
}
.is-four-columns .wp-block-column{
flex: 100% !important;
margin-left: 0;
padding: 0 !important;
}
}
The "!important"s are there to override the WP defaults if you want to change the default WP media breakpoints.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.