Divi has built-in responsive design editing that makes it extremely easy to adjust the style of your website on desktop, tablet, or phone display (without knowing CSS). Part of Divi’s built-in responsive editing includes a simplified method for making more advanced responsive design changes using custom CSS. This is much more convenient than having to rely on an external style sheet with media queries. You can even make adjustments to the CSS visually in real time for each of the device displays, taking much of the guesswork out of responsive design.
In this tutorial, I’m going to show you how to make convenient responsive design changes using custom CSS so that you can make advanced design touch ups that may not be available in Divi’s built-in design options.
Let’s get started.
Divi’s Built-in Breakpoints for Responsive Editing
Divi has three general responsive breakpoints (points where the design changes based on the width of the browser) that are built in to the settings of any element in the Divi Builder. These three breakpoints are primarily meant to facilitate the specific design settings for desktop, tablet, and phone displays.
Divi’s three main responsive breakpoints for desktop, tablet, and phone displays are as follows:
- Desktop: 981px and above
- Tablet: between 980px and 768px
- Mobile: 767px and below
These three breakpoints are the same through all of the responsive design tabs throughout the Divi builder, not just for advanced custom CSS. So everytime you deploy the responsive design tabs, any styling done under those tabs will be displayed within the range of those three main responsive breakpoints.
Also, it is worth mentioning that these general breakpoints for device displays are not the only breakpoints that are built in to the structure of the Divi Theme. You can learn about those on our article on identifying Divi’s responsive breakpoints.
Understanding Divi’s Custom CSS Input Boxes
When you customize an element (section, row, or module) within the Divi builder, each design option corresponds (or targets) a specific part of that element. For example, when editing a text module, you can target any part of that module using the built-in settings (ie. Heading 2 Font, Left Padding, etc…).
Similarly, when you customize a Divi element (section, row, or module) using the advanced Custom CSS
This article was written by Jason Champagne and originally published on Elegant Themes Blog.