Overview
Divi includes a single Custom CSS field in the Theme Options, but any CSS added there applies to every device size. When you need styles that only affect specific screen sizes, or a range of screen sizes, you are forced to write your own media queries, which can quickly become confusing and error-prone.
The Divi Responsive Helper plugin makes this much easier by adding dedicated Custom CSS input areas that map directly to Divi’s responsive breakpoints. You can write CSS that targets desktop, tablet, phone, combinations of breakpoints, or fully custom media queries without manually writing media query code. This allows you to apply responsive CSS more visually and structurally, while keeping your styles organized and predictable across devices.
How To Use Custom CSS
Write CSS Per Breakpoint Divi 4
To start using the CSS per breakpoint feature in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the CSS Media Queries subtab and write code in the respective code boxes per breakpoint as needed.
There is no need to manually write media query code. Simply write or paste standard CSS into the appropriate input field, and the code will only apply to the screen sizes associated with that setting. Each field includes contextual help text that explains exactly which device sizes it targets.
Divi 4 Custom CSS Inputs
In Divi 4, the plugin provides multiple custom CSS fields that target individual breakpoints as well as common breakpoint combinations. This approach works well when working with Desktop, Tablet, and Phone layouts.
The available Custom CSS inputs include:
- Custom CSS For Desktop Only (devices 981px and up)
- Custom CSS For Tablet Only (devices 767px – 980px)
- Custom CSS For Phone Only (devices 0px – 767px)
- Custom CSS For Desktop And Tablet Only (devices 769px and up)
- Custom CSS for Tablet And Phone Only (devices 0px – 980px)
Each input automatically applies the necessary media query logic behind the scenes, allowing you to focus only on writing CSS.
Write CSS Per Breakpoint Divi 5
To start using the CSS per breakpoint feature in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the CSS & Media Queries tab from the left sidebar. From there, you can write code in the respective code boxes per breakpoint as needed.
There is no need to manually write media query code. Simply write or paste standard CSS into the appropriate input field, and the code will only apply to the screen sizes associated with that setting. Each field includes contextual help text that explains exactly which device sizes it targets.
Divi 5 Custom CSS Inputs
Divi 5 introduces additional breakpoints, including Ultra Wide, Widescreen, Tablet Wide, and Phone Wide. Because of the increased number of breakpoints, creating every possible breakpoint combination would be impractical and difficult to manage.
For this reason, Divi Responsive Helper takes a simpler and more scalable approach in Divi 5. Instead of combination-based inputs, the plugin provides a dedicated Custom CSS field for each individual breakpoint. This keeps the interface clean and predictable while giving you direct control over every breakpoint Divi 5 supports.
Each CSS field applies only to its specific breakpoint, making it easy to fine-tune styles without overlapping logic or complex combinations.
How To Use Custom CSS Media Queries
In addition to breakpoint-based CSS inputs, Divi Responsive Helper also includes a Custom CSS Media Queries feature for more advanced use cases.
These configurable media queries allow you to define your own minimum and maximum screen widths, then write CSS that applies only within that exact range. This gives you precise control when the built-in breakpoints are not sufficient.
Create Custom CSS Media Queries Divi 4
To start using the custom CSS media queries feature in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the CSS Media Queries subtab and write code in the respective code boxes per breakpoint as needed.
To create a custom media query, click Add New, enter the desired min-width and max-width values, and add your CSS to the code field. The plugin automatically handles the media query logic for you.
Create Custom CSS Media Query Divi 5
To start using the custom CSS media query feature in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the CSS & Media Queries tab from the left sidebar.
You can add as many custom queries as needed, making this feature flexible enough to handle edge cases, device-specific tweaks, or layout refinements between standard breakpoints.
