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.
Ways to Preview Your Mobile Site
To know what you need to adjust, you first need to see what it looks like.
- 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.
- WordPress 5.5 comes with device preview options for Posts and Pages. 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.
- 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 often recommend the Ultimate Addons for Gutenberg Plugin (UAG), if for no other reason, 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)
- and more…
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 new WordPress Mastery Course. Perfect for anyone who wants to go from Mystery to Mastery