Skip to main content
All CollectionsTroubleshooting and FAQsCommon Issues
How to Fix Missing Sections/Rows/Modules on Phones/Tablets
How to Fix Missing Sections/Rows/Modules on Phones/Tablets

How to troubleshoot Sections/Rows/Modules visibility issues on Tablets or Mobile devices.

Updated over 4 months ago

Sometimes, Sections/Rows/Modules are not visible on mobile devices such as Phones and/or Tablets.

The most common reasons why they're not 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 the element is visible with Safe Mode enabled, it means that a piece of custom JS or CSS code 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?