Block Editor (Gutenberg): How to prevent custom columns from stacking awkwardly

  • Unknown's avatar
    elenacruz9207 · Member ·

    Hi everyone,

    I’m currently building a custom homepage layout using the native WordPress Block Editor (Gutenberg) and the default theme. I’ve run into a frustrating issue with the responsive layout on mobile screens.

    On desktop, I have a three-column section featuring an image on top, a short text snippet in the middle, and a call-to-action button at the bottom. It looks perfectly balanced. However, when I scale down to mobile viewports, the columns stack vertically but the spacing goes completely out of whack—either the text gets too tight against the image boundaries, or the buttons overlap slightly with the text containers.

    I’m trying to achieve a clean, fluid transition where the padding and margin adjust dynamically based on screen size, similar to the smooth mobile layout handling seen on sites like Mapache Tours. Instead, my native columns feel completely rigid and require a ton of custom CSS overrides for every minor breakpoint.

    A couple of questions:

    1. Is there a way within the native Group or Column block settings to define flexible, fluid spacing (like using clamp or viewport units) without writing external CSS?
    2. If I need to resort to a custom CSS class, what is the best approach to make Gutenberg’s inner block containers respect flex/grid spacing properly on mobile?

    Any insights or best practices would be incredibly helpful!

    Thanks so much,

    The blog I need help with is: (visible only to logged in users)

Log in or create an account to reply