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
Edit the module for which you want to make adjustments
Go to the Design Tab and find the option that you want to change
Hover over the option name
Click on the Phone icon
to enable the Responsive settingsClick on the tab related to the Device you want to change, such as a Desktop, Tablet, or Phone
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.
Open the Section settings by clicking on the Gear icon
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
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.