How to Fix Missing Sections/Rows/Modules on Phones/Tablets (Divi)

How to Fix Missing Sections/Rows/Modules on Mobile Phones and Tablets Using Divi

The issue of missing sections, rows, or modules on mobile phones and tablets while using the Divi theme is a common problem you might encounter while designing your site. Fortunately, there are several ways to resolve this issue to ensure that all elements are displayed correctly on mobile devices.

1. Check Divi's Responsive Design Settings

The first step in troubleshooting this problem is to ensure that the responsive settings in Divi are correctly configured. Divi provides multiple options to control how sections, rows, and modules appear on smaller screens like phones and tablets.

How to Check:

• Go to the page editor for the row or module.
• In the module or section settings, check the responsive settings and enable or disable options as necessary.
• You can show or hide elements on mobile devices by using the Show on Phone or Hide on Phone options.

2. Use Custom Code to Adjust Element Display

If the sections or modules are not displaying correctly on mobile devices, you can add some custom code to enhance the display of the elements. You can use CSS to hide or resize elements appropriately for smaller devices.

Examples of Custom Code:

• Hide a Section on Mobile Devices: @media (max-width: 767px) { .your-section-class { display: none; } }
• Reduce Font Size: @media (max-width: 767px) { .your-text-class { font-size: 14px; } }

3. Check for Plugin Conflicts

Sometimes, the plugins installed on your site may be the reason for the missing sections, rows, or modules. Certain plugins can conflict with Divi's settings, leading to display issues on mobile devices.

How to Resolve the Issue:

• Disable the plugins one by one to find the plugin causing the problem.
• Once you identify the problematic plugin, you can update it or replace it with an alternative that is compatible with Divi.

4. Update the Divi Theme and Plugins

It’s crucial to ensure that your Divi theme and all the plugins you are using are updated to the latest version. Older versions may have bugs that cause sections, rows, or modules to disappear.

How to Update:

• Go to your WordPress dashboard.
• Check for updates for Divi and your plugins.
• Install the available updates and check if the issue is resolved.

5. Test Your Site Using Developer Tools

After making adjustments, it's best to test your site using the developer tools in your browser. You can use these tools to inspect how sections and rows are displayed on smaller screens and determine if the problem has been resolved.

How to Use Developer Tools:

• Open your site in the Google Chrome browser.
• Press F12 to open the developer tools.
• Go to the Device Mode section to test how the site appears on different devices.

By following these steps, you can easily fix the issue of missing sections, rows, and modules on mobile phones and tablets in Divi. Make sure your site delivers an excellent user experience across all devices.