The Responsive Editor shows all responsive states for a single option: desktop, tablet, phone, and any extra breakpoints you have enabled. You can see and edit all values at once instead of constantly switching device views in the builder.
When you change a value in a specific device row inside the Responsive Editor, that change applies only to that device. Other devices keep their own values or inherit the main value (usually the desktop one) until you override them.
How to open the Responsive Editor
Open the page in the Divi 5 Visual Builder.
Hover any section, row, column, or module and click the settings (gear) icon to open its options panel.
In the options panel, find a setting you want to adjust (for example, text size, padding, margin, or background).
Click on the Responsive Editor icon
to open the Responsive Editor.
The panel appears next to the option and shows every available breakpoint for that setting in one place.
Understanding the Responsive Editor panel
Inside the Responsive Editor panel, you will typically see:
A list of breakpoints (desktop, tablet, phone, and any extra breakpoints you enabled).
Optional extra states, such as hover or sticky, are available for that setting.
Each row in the panel represents a state (for example, Tablet, Phone, or Tablet Hover). You can type or adjust a value directly in that row to target that device or state.
As you click different rows, Divi may also switch the canvas view so you can see how the design looks on that device while you edit.
How responsive inheritance works
By default, Divi 5 stores one main value for each setting at the desktop level. Other breakpoints inherit that value automatically until you set a different one for them.
In practice, this means:
If you only set a value for desktop, all other devices use that same value.
If you change the value for tablet in the Responsive Editor, tablet now has its own value and no longer follows desktop for that setting.
If you reset the tablet value, it goes back to inheriting from the desktop value.
In the image above, the Text module's font size was set to 16px on Desktop, Tablet has no value, which means it inherits the Desktop value, and it displays with a gray color, and for Phone, the text font size was set to 12px.
Editing a setting with the Responsive Editor
Here is the basic workflow:
Open the element settings and click the Responsive Editor icon
next to the setting you want to adjust.
In the panel, locate the row for the device you want to edit (for example, Tablet).
Type or adjust the value for that device.
Repeat for any other devices that need their own value.
Click the X icon to close the panel when you are finished, then save your changes in the Visual Builder.
You do not need to switch the main device view at the top of the builder to edit each value. The Responsive Editor panel handles all breakpoints from one place.
Identify which settings have responsive values
Divi 5 gives you visual cues so you can see where responsive overrides exist:
The Responsive Editor icon turns blue
when that setting has different values for one or more devices or states.You can click the icon at any time to see which devices have custom values and which still inherit the main value.
For more complex elements, you can also enable the Modified Settings filter in the options sidebar.
This highlights only the settings that have been changed, so you can quickly open the Responsive Editor for those specific options and review their device values.
How the Responsive Editor works with custom breakpoints
If you use Divi 5's customizable breakpoints feature, the Responsive Editor shows every enabled breakpoint for that setting. Divi 5 can support up to seven breakpoints (for example, Phone, Phone Wide, Tablet, Tablet Wide, Desktop, Widescreen, Ultra Wide), and you can customize their widths globally.
In the Responsive Editor panel:
Each enabled breakpoint appears as its own row.
You can set specific values for any of them.
Any breakpoint you leave empty inherits from its parent (usually the next larger device).
This lets you go from simple three-device editing (desktop, tablet, phone) to fine-grained control when you need it, without changing how the Responsive Editor works.
Example 1: Fine-tune heading text for different devices
Open the page in Divi 5 Visual Builder.
Click on the module itself or its settings icon.
Go to the Design tab and find the text or title size option.
Click the Responsive Editor icon
next to the size setting.In the Responsive Editor panel:
Set a comfortable size for the Desktop.
Reduce the size of the Tablet so the heading fits nicely.
Reduce it again for the Phone so it stays readable without wrapping too much.
Close the panel and save the page.
Your heading now uses different sizes per device, all managed from that single Responsive Editor panel.
Example 2: Adjust spacing per device
Open the settings for a section or row that feels too tall on mobile.
Go to the Design tab and find the padding or margin option.
Click the Responsive Editor icon
next to that option.In the Responsive Editor:
Keep your Desktop spacing as it is.
Reduce top and bottom padding for the Tablet.
Reduce it even more for the Phone if you need tighter spacing.
Save the changes.
This keeps your desktop layout spacious while making the same section feel compact and comfortable on smaller screens.
Example 3: Reset values that cause layout issues
Sometimes a layout looks wrong on one device because of an old override you forgot about. The Responsive Editor makes it easy to find and fix these:
Open the element that looks wrong and locate the setting you suspect (for example, font size or margin).
If the Responsive Editor icon is blue
, click it to open the panel.Look for any devices with unusual values.
Use the Reset control in that row to clear the custom value and return it to the inherited one.
Save your changes and recheck the layout.
This is much faster than guessing which device or option caused the problem.
Tips for using the Responsive Editor effectively
Start with the desktop: Set the principal value first, then tweak only the devices that need adjustments.
Do not over-customize: Only set unique values where necessary. Fewer overrides mean less to maintain later.
Use the device icons for full-page checks: Switch the canvas between Desktop, Tablet, and Phone to see the big picture, then use the Responsive Editor to tweak specific settings.
Watch the blue icons: They are your map to all responsive overrides in a design.
Once you get used to the Responsive Editor in Divi 5 Visual Builder, responsive design becomes more about simple, focused corrections and less about hunting through devices and settings.