adjust breakpoints columns

[Marjon Tas]

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

[Tom Lead Developer]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marjon Tas]

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

[Tom Lead Developer]

Give this CSS a shot:

@media (min-width: 600px) {
    .wp-block-columns {
        flex-wrap: nowrap;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marjon Tas]

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

[Leo Customer Support]

Try adding this as well:

@media (min-width: 600px) {
    .wp-block-column:nth-child(3) {
        margin-left: 32px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marjon Tas]

Hi Leo,
Yes, that works and solves the problems! Thanks very much!
Best regards,
Marjon

[Leo Customer Support]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts