How To Edit Css For Divi Page Templates

Divi has built-in responsive design editing that makes information technology extremely like shooting fish in a barrel to adapt the style of your website on desktop, tablet, or phone display (without knowing CSS). Role of Divi'southward congenital-in responsive editing includes a simplified method for making more advanced responsive design changes using custom CSS. This is much more than convenient than having to rely on an external style sheet with media queries. You can even brand adjustments to the CSS visually in existent fourth dimension for each of the device displays, taking much of the guesswork out of responsive pattern.

In this tutorial, I'thou going to show you lot how to make user-friendly responsive design changes using custom CSS then that you lot tin can make advanced design touch ups that may not be available in Divi'south built-in design options.

Let'south get started.

Divi'southward Built-in Breakpoints for Responsive Editing

Divi has 3 general responsive breakpoints (points where the blueprint 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 blueprint settings for desktop, tablet, and phone displays.

Divi'south three main responsive breakpoints for desktop, tablet, and phone displays are as follows:

Desktop: 981px and higher up
Tablet: between 980px and 768px
Mobile: 767px and beneath

These iii breakpoints are the aforementioned through all of the responsive design tabs throughout the Divi architect, non just for advanced custom CSS. So everytime you deploy the responsive blueprint tabs, any styling done under those tabs will be displayed within the range of those three chief responsive breakpoints.

Also, information technology is worth mentioning that these full general breakpoints for device displays are not the only breakpoints that are built in to the construction of the Divi Theme. Yous can learn about those on our article on identifying Divi's responsive breakpoints.

Agreement Divi's Custom CSS Input Boxes

When you customize an chemical 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 function of that module using the born 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 stand for (or target) the whole or certain parts of that Divi element. The number of available Custom CSS boxes volition differ depending on the element you are styling. A text module may only have three custom CSS element input boxes (earlier, main, and after), but a call to action module will have additional boxes for title, clarification, and button. This is because the module has more than parts that can be targeted within that module element.

Here is an illustration of the different custom CSS input boxes available for the Call to Action module.

Each custom CSS input box targets a specific CSS course within the element. To run into the class existence targeted for a particular chemical element, merely hover over the chemical element and click the question mark icon. There yous volition run into the CSS course existence targeted.

Therefore, you lot don't demand to add a CSS form to your CSS snippet in the input box. If you exercise, the code will not work.

Instead only add the CSS properties directly to the box that you want applied to the form already being targeted.

How to Add together Custom CSS to Responsive Design Breakpoints

To admission the three principal responsive design breakpoints for any of the css input boxes, simply hover over the element and click the tablet icon. Then you will see the iii responsive design tabs.

Now all you would need to do is use the tabs to add CSS to whatsoever of the iii device displays (desktop, tablet, and telephone).

For case, let's say y'all want to have the promo push button for a Telephone call to action to span the full width of the module on tablet and telephone only not on desktop. You lot would select the tablet tab under the Promo Button input box and add "display: block;".

Notice that when y'all select the tablet tab, the Divi Builder View Mode shifts to the Tablet View Mode (a width of 768px) for a better glimpse of what your pattern will expect similar in real time.

Smaller Device Inherit the CSS of Larger Devices by Default

By default, the lawmaking that is applied to the tablet tab will likewise be inherited past the phone display as well. To help remind united states of this, Divi adds gray placeholder lawmaking to the input box with the same lawmaking that was added to the tablet display.

The reason that the phone display inherits the tablet display is because the actual breakpoint (media query) for the tablet display on the backend is prepare to "max-width: 980px;" which ways that the code added to the tablet will also be practical to telephone considering the telephone display is less than 980px wide. So if yous want to utilize a different fashion to phone, you will demand to add together additional code to the telephone tab input box.

NOTE: If you also add together Custom CSS to the telephone display, Divi will smartly change the media query for tablet on the backend to the more precise range between 768px and 980px (or max-width: 980px and min-width: 768px).

What the Custom CSS is Applied on the Backend

Permit's say we add together custom CSS to all 3 responsive tabs (desktop, tablet, and phone).

On desktop, we position the button to the bottom right of the module.

On tablet, we override the desktop code and simply span the push to the full width of the module.

On phone, we override the tablet CSS and return the display to normal.

If we inspect the CSS on the backend, you can encounter that Divi organizes the code with the post-obit media queries then y'all don't have to:

Desktop:

@media but screen and (min-width: 981px) .et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {     position: absolute;     bottom: 0px;     right: 0px; }

Tablet:

@media only screen and (max-width: 980px) and (min-width: 768px) .et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {     display: cake; }

Phone

@media only screen and (max-width: 767px) .et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {     display: inline-block; }

How is the CSS stored in Divi?

As a part Divi'south built-in speed optimizations, all styling within the Divi Builder (including the custom CSS) volition be combined, minified and stored as a static CSS file for faster page loading. So if you are wanting to bypass the need for calculation custom CSS via a kid theme, you can take advantage of the built-in responsive CSS inputs without having to worry almost slowing down your site.

For more than, bank check out our post on how to speed up your Divi site.

Final Thoughts

Hopefully, this mail will help y'all understand a chip better how to accept advantage of Divi's born custom CSS input boxes to make user-friendly responsive design changes to your website.

For most people, there will exist no demand to venture over to the advanced tab to add custom CSS to your design. Divi has so many options that are congenital-in that fifty-fifty advanced users will rarely find a need to employ custom CSS. However, if the fourth dimension comes when you need advanced styling, it helps to know how piece of cake it is to do in Divi.

What has your experience been with Divi'due south custom CSS inputs?