How to Adjust WordPress Blocks for Mobile Display

Originally published August 2020. Updated June 2023.

When you’re creating your website, you’re probably working from a desktop computer. But, here’s the thing, most of your site visitors will be on a tablet or a phone. The lesson: having a site that looks good on mobile devices is a must.

In this post, you’ll learn how to adjust some WordPress blocks for mobile display without code. We’ll also show you a few ways to preview your website for tablet or phone.

Three Ways to Preview Your Mobile Site

To know what you need to adjust, you first need to see what it looks like.

1. In Customize look at the very bottom of the left sidebar. Click on each display icon to switch the view from desktop to tablet or mobile screen.

2. The Preview button at the top of a page or post lets you switch your dashboard view from desktop to tablet or phone screen sizes before you click Publish or Update.

3. Another simple (and more accurate) way to preview your site for different size screens, is to go to the frontend of your website and (when your browser isn’t in fullscreen) grab the bottom corner of the browser window and drag it down to smaller sizes.

Adjusting Blocks for Mobile Display

It is all fine and good to be able to see what your design looks like in mobile, but you need to know how to make adjustments.

Not all blocks offer mobile options but some do. You’ll have to look in the block settings to check if the one you’re using comes with mobile display options.

Some blocks allow you to stack blocks on mobile but that is about it for settings from standard WordPress blocks. Hopefully, WordPress will offer more in the future.

We use and recommend the Ultimate Addons for Gutenberg Plugin (UAG), because several blocks from this plugin offer easy mobile editing controls.

The UAG Advanced Heading Block is one example. In the right block setting sidebar under Typography (click the wrench icon) you can set separate options for desktop, tablet and phone. Click the device icon and set the value for that screen size.

Another UAG block with the same capability—and more—is the UAG Section Block. When you use this block in place of the standard WordPress Group or Cover Block is that you can adjust the spacing in the block for mobile devices. Isn’t this great!

Look for mobile controls in other UAG blocks such as:

• Advanced Columns Block
• Post Grid, Post Grid Masonry and Post Carousel
• InfoBox (click into content -> typography)
• Testimonials (change number of columns depending on the device)
• Team (click the wrench icon to open Typography. You can also adjust the font size for the social icons)
• Social Share (Stack on mobile and adjust icon size)
• Icon List (adjust icon size and typography)

We think it’s great that you can manage how your site looks on different devices without any custom code.

Extend your Learning…

If you liked this post, you’ll love our WordPress Made Easy Online Course. Perfect for WordPress website owners and users who want the skills and knowledge to create and manage a WordPress website.