Skip to main content
How to Optimize Divi Layouts for Mobile Devices

Learn how to use Divi’s responsive design features to adjust layouts, customize modules, and fine-tune settings for mobile screens.

Updated over a week ago

Ensuring your website looks and functions flawlessly on mobile devices is crucial for delivering a great user experience and maintaining engagement.

In this article, we will guide you through the process of optimizing your Divi layouts for mobile devices.

Divi offers Responsive Settings out of the box, which can be used to make various changes to different elements (sections, rows, columns, and modules) inside a page layout.

For each option available in the Design tab, you can enable the Responsive settings and fine-tune adjustments for Desktop, Tablet, and Phone devices.

Use Divi's Responsive Settings

  1. Edit the module for which you want to make adjustments

  2. Go to the Design Tab and find the option that you want to change

  3. Hover over the option name

  4. Click on the Phone icon to enable the Responsive settings

  5. Click on the tab related to the Device you want to change, such as a Desktop, Tablet, or Phone

  6. Make your changes and save them

For more details about the Responsive settings, please check the article on How to Use Divi's Responsive Settings.

Use Custom CSS Media Queries for creating Advanced Responsive controls

If you still need to apply different settings for a specific device, which cannot be done with the default Responsive settings, you can use custom CSS Media Queries.

Example: Let's assume that a section should only be visible on tablets in landscape orientation, but it will not be displayed in any other orientation or on other devices.

  1. Open the Section settings by clicking on the Gear icon

  2. Go to Advanced Tab → CSS ID & Classes → CSS Class and set a custom CSS class for it. For example, let's use ipad-landscape-display

  3. in Divi → Theme Options → General Tab → Custom CSS add this CSS code:

    .ipad-landscape-display {
    display: none;
    }
    @media (min-width : 981px) and (max-width : 1024px) {
    .ipad-landscape-display {
    display: block;
    }
    }

Code Explanation:

  • If the browser window is larger than 1024px or smaller than 980px, the element with the CSS class ipad-landscape-display will not display.

  • If the browser window is between 981px and 1024px, the element with the CSS class ipad-landscape-display will display.

Did this answer your question?