Responsive Conditions allow you to choose if an element should display in desktop, tablet, or mobile views. You don’t have to design separate layouts for each device.
You can simply show or hide elements according to the screen size to customise your content.
Purpose of Responsive Conditions
Sometime, you do not want to display every element on your website on different devices.
A block that appears well on a desktop may add clutter to the mobile view, while a simplified version of this block may be more beneficial for smaller screens.
Responsive Conditions allows you to control where and when each block is displayed, while fixing this problem.
Benefits include:
- Improved user experience – show device-friendly layouts.
- Faster loading times – hide heavy elements like large images or videos on mobile.
- Cleaner design – avoid overcrowding by showing only relevant content per device.
How To Use Responsive Conditions
From your WordPress dashboard, navigate to the Responsive block and enable the Responsive Condition extension.
Now open the page/post in the editor.
And click the plus icon, select the block you want to control.
In the right-hand block settings panel, go to the Advanced tab. Click on the Responsive Conditions option.
Once enabled, you’ll see toggle options for:
- Desktop – show or hide the block on larger screens.
- Tablet – control visibility on medium-sized screens.
- Mobile – decide if the block appears on smartphones.
Use the toggles to set visibility for each device.
Example Use Cases
Here are some examples of when you could use Responsive Conditions:
- Performance improvements: Disable the loading of high-resolution images or background videos on mobile to improve loading time.
- Tailored layouts: Show a table with detailed pricing information on the desktop version, but only show a simplified version on mobile.
- Marketing campaigns: Display different CTAs (Call to Actions) for the desktop audience vs the mobile audience.
- Navigation improvements: Instead of a full menu shown to desktop visitors, only a hamburger menu on mobile, relying on the visibility settings to dictate what will display to each group.
Please note that this feature exclusively functions with Responsive Blocks only.
