How To Display WordPress Blocks Based On Screen Size

Blocks are essential for any post or page. Sometimes you may need to hide the blocks on specific devices or you can say display WordPress blocks based on Screen Size. For instance, you may use a spacer block in your post. It will look great on any desktop device but it will look terrible on mobile devices.

By default, WordPress doesn’t allow you to display WordPress blocks based on screen size. To display blocks based on screen size you have to use an additional plugin. In this post, I show you step by step to display WordPress blocks based on screen size. 

Let’s see then. 

How To Display WordPress Blocks Based On Screen Size

At first, install and activate the Block Visibility plugin from the WordPress plugins directory. 

Now open the page or post where any blocks need to be hidden on a Mobile or Tablet device. 

Select the block and click on the ‘Block’ from the top right corner of settings. 

Now check for the visibility option. Here you will find the option for hiding the block.

Scroll a bit below you will find the option to hide blocks depending on screen size. For this case, look for the option ‘Screen Size’. For the applicable device toggle, the option and your block will be hidden for that device. 

If you want to hide the block from everyone toggle the ‘Hide block’ option. 

If you want to hide the block based on the schedule change the date on ‘start showing’ and ‘stop showing’. For multiple schedules, click on add schedule option and then add more schedules. Then toggle ‘Hide when schedules apply’ and this block will be hidden at the scheduled time. 

You can also hide the block depending on the user role. For instance, you want that your block will be only visible to logged-in users. Then choose the user role as ‘Logged-in’. No other person than logged-in users will be able to view the block. 

There are a lot of controls available for this plugin. If you want to customize then navigate to Settings -> Block Visibility. If you want more device control, click on visibility controls. 

Scroll below and from the Screen size toggle ‘Enable Advanced screen size controls’

This will enable two more screen size control options. 

Last Words

I hope this helps you to display WordPress blocks based on screen size and even more. If you face any difficulty, feel free to tell me and I will be happy to help you. If you liked the post then please share it with your friends and don’t forget to leave your thoughts in the comment box below.