In today's mobile-first world, creating a website that looks great on all devices is essential. Divi's responsive settings allow you to customize your site's appearance and functionality for different screen sizes, ensuring a seamless user experience.
In this article, we will guide you through the process of using Divi's responsive settings to tailor your website's design for desktops, tablets, and mobile devices.
All design options in the Design Tab support Responsive settings for each element (section, row, column, module).
Use the Divi's Responsive settings
Open the element's settings by clicking on the Gear icon
Go to the Design Tab
Hover over the option name that you want to change
Click on the Responsive icon
to enable the Responsive settingsUse the three Tabs to switch to Desktop, Tablet or Phone
Adjust the option value for each device
Save your changes
Important Note: If no value is specified for smaller devices (tablet and phone), the value used on the larger devices will be used.
Example:
If you set the font size for a Text module to be 40px for Desktop and 20px for Phone, the Tablet will inherit and use the 40px from Desktop.
Use the Divi's Responsive preview options
Expand the Visual Builder toolbar by clicking on the Elipse icon
Use the Device preview icons to switch to different view modes
Desktop View
Tablet View
Phone View
Enable the Divi's Responsive preview options
If you are not seeing the three devices icons (as shown above), click on the Three Horizontal Dots icon 
and ensure that all three devices are enabled:
Important Note: The Divi's Responsive preview options are used only for preview purposes.
Any adjustments made will be made only for desktops unless you enable the Responsive icon and make the changes for the desired device.
Use the Theme Customizer to change some of the default setting values
Go to WordPress Dashboard → Divi → Theme Customizer → Mobile Style
Choose the device for which you want to change some of the default settings
Make changes
Click on the Publish button located at the top
Note: Using the Theme Customizer, you will only be able to change the following default settings:
Section's Height
Row's Height
Body text size
Header Text size