If a section, row, or module (referred to as an element) shows up on desktop but disappears on phones or tablets, there are three likely culprits: a visibility setting hiding it on mobile, a display condition blocking it, or custom code overriding it.
This article walks you through each cause and how to fix it in Divi 5.
What's Causing This?
The element has Visibility settings configured to hide it on phones and/or tablets.
The element has a Display Condition that isn't being met on mobile devices.
Custom CSS or JavaScript is hiding the element on smaller screens.
Fix 1: Check the Element's Visibility Settings
Open the page in the Visual Builder.
Click the element (section, row, or module) that isn't showing on tablet/phone.
In the settings panel, click the Advanced tab.
Scroll to the Visibility section.
Make sure Phone and Tablet are not checked - if they are checked, the element is set to hide on those devices.
Uncheck any devices where the element should be visible.
💡 Tip: Enable Show Disabled Elements at 50% Opacity in the builder so hidden elements are visually marked in the editor. To turn this on:
From the left sidebar, click the Visual Builder settings icon
. Ensure the Show Disabled Elements at 50% Opacity option is On.
This will only show/hide disabled elements in the Visual Builder, without affecting the front end.
Fix 2: Check the Element's Display Conditions
Display Conditions control when an element appears based on rules you define (e.g., logged-in users only, specific pages, or device type). If a condition isn't met, the element won't show.
Open the page in the Visual Builder.
Click the element that isn't showing on tablet/phone.
Go to the Advanced tab in the settings panel.
Scroll to the Conditions section.
Review any conditions listed. Remove or adjust any condition that would prevent the element from displaying on phones or tablets.
Fix 3: Check for Custom CSS or JavaScript
Custom code added to your site can override Divi's visibility settings. Use Safe Mode to test whether custom code is the cause.
Go to your WordPress Dashboard.
Navigate to Divi → Support Center.
Scroll to Safe Mode and enable it.
Reload the page on a phone or tablet (or use your browser's mobile preview).
Check if the element is now visible.
If the element appears in Safe Mode, custom code is hiding it. Check these locations for the code causing the issue:
For custom CSS:
Divi → Theme Options → General tab → Custom CSS field
Any Code Module in your layout that contains CSS
Page Settings → Advanced tab → Custom CSS field
For custom JavaScript:
Divi → Theme Options → Integration tab
Any Code Module in your layout that contains JavaScript
Remove or update the code that targets the element and hides it on mobile.
Still Having Trouble?
Clear your site's cache after making any changes - cached versions of the page can make it look like the problem persists even after a fix. If the issue continues, contact Elegant Themes support with a description of which element is hidden, on which device, and which fixes you've already tried.