WordPress Gutenberg Is the Future – But Is It Ready for Responsive Design?

WordPress Gutenberg is the future – but is it ready for responsive web design? Here are some workarounds to make the block builder truly responsive!

Rendering Responsive Design. A website is displayed on a laptop, a tablet and a smartphone

Patrick Mitter /

16.02.2022


Unless youโ€™re living under a rock, you must have caught wind of the laser-sharp focus that WordPress has been putting on Gutenberg lately. While some web creators are still in denial, refusing to believe that the block editor is the future of WordPress, there are also some early-ish adopters that are setting their web design business up for the future and getting familiar with Gutenberg. 

If youโ€™re team Gutenberg, you might still have minor issues with the block builderโ€™s functionality here or there, which is kind of a bother, but manageable. But as of this moment, thereโ€™s a crucial factor in terms of Gutenbergโ€™s usability thatโ€™s actually more than just a minor detail. 

Let me explain: WordPress users around the globe have been commenting about hickups on the way to creating truly responsive websites with the block editor. This leads me to ask:

Is WordPress Gutenberg Responsive?

In terms of current WordPress developments, this seems to be the million-dollar question. 

As we all know, itโ€™s not enough to build a website on your big, fancy web designer screen and then take the last day of the project to make it work on mobile devices. While this might have been the way to go at some point, it has been replaced by mobile-first indexing (or even mobile-only indexing, if you ask Google). 

Making websites truly responsive is not just a goodie.

It is the bare minimum.

As for my experience, I kid you not โ€“ this is the way I felt when I tried to create a responsive website with Gutenberg:

*phone rings*

โ€œOperator?โ€

โ€œIโ€™d like to place a call to Johannes Gutenberg โ€“ I have some questions about the future.โ€

โ€œIโ€™m sorry, Mister Gutenberg is currently not very responsive.โ€

Klicken Sie auf den unteren Button, um den Inhalt von giphy.com zu laden.

Inhalt laden

via GIPHY

When used on its own, things are not looking good for Gutenberg. Allow me to explain what I mean: WordPress is on a good way when it comes to the block builder, but when it comes to responsive web design itโ€™s definitely not there yet. Here are some pros and cons: 

Pros of Gutenberg Blocks for Responsive Webdesign

Letโ€™s start with the good news first: Gutenberg lets you stack elements on top of each other instead of side-by-side. This is a huge step forward when comparing Gutenberg to Elementor or other page builders. 

With page builders, you can choose to display or hide elements depending on the screen size. But this is hardly enough โ€“ and also: it creates even more code. Which leads to bad performance. Which leads to bad SEO. Trust me, Google isnโ€™t particularly impressed by duplicate content.

Mobile Stacking Option in Gutenberg

Mobile Stacking Option in Gutenberg

Duplicate Content for different screen sizes as often seen as the only responsive option in pagebuilders

Duplicate Content for different screen sizes as often seen as the only responsive option in pagebuilders

Cons of Gutenberg Blocks for Responsive Webdesign

Well, letโ€™s keep this one short and sweet: There are really hardly any options within the blocks in regards to responsiveness.

But fear not โ€“ as always, there are ways around this, and you can definitely make it work. 

How to Make Gutenberg Really Responsive

Weโ€™ve established that Gutenberg, used on its own, is lacking the functionality thatโ€™s needed to create responsive websites. There are a few workarounds to combat this. One of them is, of course, hiring a developer โ€“ which, of course, is very expensive. 

There are tools to help you along the process that complement Gutenbergโ€™s strengths by making up for its weaknesses. As always, though, you have to balance the pros and cons of adding yet another tool or plugin to your site. After all, you want to keep your code light and lean, not weigh it down with dozens of plugins โ€“ which Iโ€™m sure youโ€™re fully aware of. 

Tools to Make Your WordPress Gutenberg Website Responsive

After all of this talk, I want to go into some practical examples of what you can do (or use) to help create the best possible experience for your websiteโ€™s users โ€“ no matter the device. 

Let me list some of the best solutions for you. Some of them are perfectly compatible with the WordPress block editor โ€“ and Iโ€™ve also included one superhero that is fully integrated with Gutenberg as well.

Now for the fun stuff: Letโ€™s get into the tools!

Gutenberg Blocks Library & Toolkit โ€“ Editor Plus

This plugin is a promising no-code style editor that lets you โ€œextendโ€ your whole Gutenberg experience. 

Apart from providing a better experience when designing for all different devices, Editor Plus offers different styling options like borders, background, box-shadows, animations, etc. Of course, you can also add your own CSS code. 

Screenshot Editor Plus

Missing a progress bar block, or a countdown timer block within Gutenberg? Editor Plus has got your back.

MBM Gutenberg Blocks

The designers over at Made by Munsters have struggled with Gutenbergโ€™s lack of responsive abilities as well. 

Screenshot MadebyMunsters

How did they solve it? By creating a responsive grid layout โ€“ for anyone and everyone to use. You can read up on it right here on the Made by Munsters website. 

Responsive Gutenberg Blocks Library

Another plugin to help you with all your responsive Gutenberg needs! 

The Responsive Gutenberg Blocks Library by CyberChimps offers completely customizable advanced blocks to help you create your unique look โ€“ of course, fully responsive. 

Screenshot Website Blocks Libary

GREYD.SUITE

By including a bootstrap grid, GREYD.SUITE lets you choose from four different screen sizes (If youโ€™d like to change them, though, you can: All four breakpoints can be altered to your preferences).

Also, in terms of width, height, or margins, almost all blocks have their own responsive settings.

Lastly, GREYD.SUITE offers highly detailed column settings โ€“ this means you can define the order of your blocks or even indentations for each breakpoint individually, without having to add your content twice with different settings (because WHO would want to do that). 

If this is the first time youโ€™re hearing about this tool, youโ€™re in for a treat. Because GREYD.SUITE does much more than just help you create responsive websites with Gutenberg. 

Screenshot Column settings
Screenshot settings breakpoints
Size settings

Bottom Line

To make your web design business future-proof, you have to go the Gutenberg route sooner or later if your favorite CMS is WordPress. 

Remember: The best time to make the switch to Gutenberg is now!

But keep in mind: To use it to its full potential, some tools will make your life so much easier. 


By Patrick Mitter

Patrick loves good texts. Preferably about topics concerning online marketing and WordPress. Having built websites by using well-known page builders on his own and being very experienced in the SEO industry, he is very familiar with any kind of problems regarding those plugins. This is the reason why he adopted Greyd’s mission to simplify work for web designers as well as agencies.

Recent in Learn

Close-up of hands typing on a laptop keyboard, representing the simplicity of performing a keyboard accessibility test.

Accessibility 101: How to perform a keyboard test

Read more

What To Do, When Your WordPress Site Got Hacked

Read more

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Use Case Tutorial: When to use a table instead of a div

Read more

greyd sustainable websites blog

10 Tips for Sustainable Websites

Read more

Scaling Content Operations (with WordPress)

Read more