How to use Divi’s Built-in Custom CSS Inputs for Advanced Responsive Editing

How to use Divi’s Built-in Custom CSS Inputs for Advanced Responsive Editing

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.

advanced responsive editing

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 input boxes, each input box will

[…]

 



This article was written by Jason Champagne and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top