Archived topic
adjust breakpoints columns
7 replies · Started by Marjon Tas on March 4, 2020
Hi,
I use GP a long time now, but now with the Gutenberg editor, I cannot figure out how to adjust te breakpoint of the columns that I use.
I use in this case a 2/3 and a 1/3 column, but between 780px and 600px they flip under eachother, and the width stays 2/3 and 1/3, so it looks bad.
I would like to extend the three columms next to eachother unto the breakpoint of 600px. Can you please give me a little hint how to achieve this?
Thanks very much.
Best regards,
Marjon
Hi there,
The core columns plugin doesn't make this easy.
Have you tried our new GenerateBlocks plugin?: https://generateblocks.com
It's currently in testing, but it will be available in the WP repo soon :)
Hi Tom,
I just made this whole website with the core Gutenberg editor. Switching now would be a lot of work, or would you think that will be easy by changing code of gutenberg into this blockcode? I didn't know of your new plugin yet.
Great if that would be a better solution, but now I am a bit stuck with this one.. Any creative ideas?
Thanks!
Best regards,
Marjon
Give this CSS a shot:
@media (min-width: 600px) {
.wp-block-columns {
flex-wrap: nowrap;
}
}Hi Tom,
That works well with the 2/3 - 1/3 column, but the 3 column pages are still having a little problem. The column on the right is missing a margin on the left. as for instance: https://ruimtewerking.nl/in-de-tuin/patio-in-arnhem/
I tried some things, but they don't work yet.
Thanks,
Best regards,
Marjon
Try adding this as well:
@media (min-width: 600px) {
.wp-block-column:nth-child(3) {
margin-left: 32px;
}
}Hi Leo,
Yes, that works and solves the problems! Thanks very much!
Best regards,
Marjon
No problem :)
