Responsive design with Gutenberg

  • tomxygen

    (@tomxygen)


    1 year, 5 months ago

    I’m building a demo website to test out the feature of Full Site Editing but I just realized that it’s basically impossible to create a different design for mobile and desktop.

    For example, I was trying to style the header of the website.

    On desktop, you could have a small logo on the left, and a menu with search and login on the right

    On mobile the same thing could be achieved with a bigger, centered logo and an off canvas menu on the right.

    This is not possible in Gutenberg because blocks don’t have different styling for different screen breakpoints.

    Is there a workaround?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 5 months ago

    Layouts for different screen sizes are accomplished through CSS media queries. Custom CSS can be placed in the customizer’s Additional CSS section. With FSE themes this section might be hidden by default. You’d then need a bit of PHP code to expose it.

    Thread Starter tomxygen

    (@tomxygen)

    1 year, 5 months ago

    @bcworkz thanks for your reply. Don’t you think this approach is very much counterintuitive?

    Gutenberg and FSE aim to make Theme designing to everyone, no-coders included, but hide the responsive settings behind CSS code.

    Elementor has this feature very well implemented, and I think Gutenberg should do it too.

    Even Kadence Blocks for Gutenberg has this setting.

    Moderator bcworkz

    (@bcworkz)

    1 year, 5 months ago

    Yeah, no doubt I suggested a Band-Aid solution. Altering standard FSE behavior is much more involved. FSE is very much a work in progress. It’ll no doubt get better. No WSIWYG editor is infinitely flexible, it’s impossible to foresee every conceivable need. Kadence is a good example of the development community stepping in to fill a perceived gap. When such an improvement is seen as an important feature, it can often end up getting rolled into the core editor when the devs responsible are amenable.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive design with Gutenberg’ is closed to new replies.