Tip for Variable Columns Using Column Blocks

For those developers with CSS skills here is a sample of how to set the Gutenberg Columm Block to variable widths. In this sample it is two quarter columns and 1 half column, but this should give you an idea:

DESKTOP PC
—————
/* Set the first column */

.has-3-columns div:first-child {
max-width: 20%;
margin-right: 4%;
margin-left: 0;
}

/* Set the second column */

.has-3-columns div:nth-child(2) {
max-width: 20%;
margin-right: 4%;
margin-left: 0;
}

/* Set the third column */

.has-3-columns div:last-child {
max-width: 50%;
margin-left: 0;
}

/* Now I did have a form plugin that was setting div tags within the parent column div and taking on its properties so for this I added the CSS below */

.has-3-columns div:first-child div, .has-3-columns div:nth-child(2) div, .has-3-columns div:last-child div {
max-width: 100%;
margin-right: 0;
}

—————

/* For mobile responsive I used the css below with a media query. */

.has-3-columns div:first-child {
max-width: 100%;
margin-right: 0;
margin-left: 0;
}

.has-3-columns div:nth-child(2) {
max-width: 100%;
margin-right: 0;
margin-left: 0;
}

.has-3-columns div:last-child {
max-width: 100%;
margin-left: 0;
}

—————

It is working great. You would think if I could figure this out in less than an hour the Gutenberg folks come up with a solution for non-coders somehow.

I hope this helps at least one developer.

HAPPY HOLIDAYS!

• This topic was modified 5 years, 11 months ago by JS.