All Collections
FAQ's and Troubleshooting
How to fix missing Sections/Rows/Module on phones/tablets
How to fix missing Sections/Rows/Module on phones/tablets

Fix Sections/Rows/Modules visiblity issues on phones and tablets

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Sometimes, we might end up with some Sections/Rows/Modules not visible on mobile devices such as Phones and/or Tablets.

The most common reasons why a Section/Row/Module isn't visible on a Phone and/or Tablet could be:

  • The element in question(Section/Row/Module) is set to not show on those particular devices.

  • The element in question(Section/Row/Module) has a Display Condition set, which is not met.

  • Custom CSS or Custom JS code changes the visibility.

Definition: Element is any Section, Row or Module

Check the Element's Visibility

  1. Open the element's Modal Settings Window

  2. Go to Advanced Tab → Visibility

  3. Ensure that none of the options are checked

Example of an Element that is set to not be visible on Phone:

In the above example, the Section has been set to not be Visible on the Phone by having the Phone option checked under Advanced Tab →Visiblity option

Pro Tip: Ensure that the Visual Builder is set to show the hidden elements with a lower opacity (50%). This way, any element using the Visibility option can be easily identified if it is set to not show on a particular device.

Set the Visual Builder to show hidden elements

  1. Open any page with Visual Builder

  2. Open the Visual Builder's settings bar

  3. Click on the three dots icon

  4. Ensure that the option Show Disabled Modules at 50% opacity is set to On

    Show Disabled Modules at 50% opacity

Check the Element's Display Conditions

  1. Open any page with Visual Builder

  2. Open the Element (which doesn't appear on Phone/Tablet) Modal Settings Window

  3. Go to Advanced Tab → Conditions

  4. Ensure there are no Display Conditions set that might prevent the Element from being visible on Tablets/Phones.

    Module's Display Conditions

Check for any custom JS/CSS code that might change the visibility of an element

  1. Go to WordPress Dashboard → Divi → Support Center

  2. Enable the Safe Mode

  3. Check again

If with the Safe Mode enabled, the Element is visible, it means that there is a piece of custom JS or CSS code that changes its default visibility.

Possible areas where custom code can be added:

  • For custom CSS Code:

    • Divi → Theme Options → General Tab → Custom CSS

    • Any Code module that might contain custom CSS code in the layout

    • Page Settings → Advanced Tab → Custom CSS

  • For custom JS code

    • Divi → Theme Option → Integration tab

    • Any Code Module that might contain custom JS code in the layout

Did this answer your question?