This guide walks through a systematic responsive audit workflow for Divi 5 sites — covering breakpoint management, layout tools, and where to apply fixes locally versus globally.

Prerequisites: This guide applies to Divi 5 only — the interface and features differ significantly from Divi 4. You should have a site already built with content in place and the Visual Builder active. Back up your site before making changes to Presets (reusable style configurations applied globally to a module type) or Design Variables, as both propagate sitewide. Note that Divi 5’s interface is still evolving; all details reflect the current stable release of Divi 5.

The recommended sequence for a Divi 5 responsive audit is desktop-first. Confirm the base layout at Desktop, make structural adjustments at Tablet, then focus on Phone — where stacking order, spacing, and touch target sizes typically need the most attention. Divi 5 ships with seven customizable breakpoints (Phone, Phone Wide, Tablet, Tablet Wide, Desktop, Widescreen, Ultra Wide), managed via the ellipsis menu in the Page Bar at the top of the Visual Builder. Enable only the breakpoints the project requires by toggling them on or off from the breakpoints settings in that ellipsis menu.

Within each element’s settings panel, the Responsive State Picker lets you switch between breakpoints and interaction states — Hover, Focus, Sticky, Active — without leaving the panel. For fine-tuning values across multiple breakpoints at once, click the Edit Responsive Values icon next to any setting to open the Responsive Editor. It displays all breakpoint values side by side, which makes typography and spacing adjustments significantly faster than toggling the canvas back and forth.

Responsive Editor
Opened via the Edit Responsive Values icon next to any setting; displays all breakpoint values side by side so typography and spacing adjustments can be made significantly faster than toggling the canvas back and forth.
Structure Templates
Available in the Row settings panel; let you change a layout per breakpoint without rebuilding — for example, a three-column desktop row can become a single-column mobile stack in a few clicks.
Design Variables
CSS custom properties managed via Divi 5’s Variable Manager (in the Theme Builder panel). Many typography and spacing values already use fluid CSS clamp(min, preferred, max) functions, which scale a value between a minimum and maximum across a size range so properties adapt automatically without per-breakpoint overrides.
X-Ray Mode
Available in the View Options menu (Page Bar); exposes container boundaries when adjusting spacing.
Extend Attributes
Accessible via the right-click context menu on any element; propagates a Preset change across the page. Note that it applies the same style values to other elements you select afterward — it is not a one-click sitewide change.

Display Order, a setting within each column’s options, controls visual stacking on smaller screens independently of module position — no visibility toggles required. Use it alongside Structure Templates when a column needs to reorder rather than just restack for a given breakpoint.

At the Row, Column, and Group level, Flexbox and CSS Grid settings are all breakpoint-aware. With Flexbox, adjust Layout Direction (flex-direction), Layout Wrapping (flex-wrap), Justify Content (justify-content), Align Items (align-items), and Gap (gap) per breakpoint. With CSS Grid, change column counts, row counts, and item placement per screen size. These handle most of the structural work during a responsive audit.

If the build used Design Variables, many typography and spacing values will already use fluid clamp() functions, adapting automatically without per-breakpoint overrides. When a global value needs to shift, update the variable rather than patching individual modules — this keeps Presets and elements in sync.

For checking widths between formal breakpoints, use the Canvas resize handle — the drag grip at the right edge of the canvas. In the View Options menu (Page Bar), enable X-Ray Mode to expose container boundaries when adjusting spacing, or Wireframe Mode on long pages for a structural overview without visual noise. The Inspector panel (Inspector icon in the Page Bar) lets you review spacing, Presets, and style values across multiple elements in a single pass without opening each settings panel individually.

The key judgment call is scope: if only one module needs different mobile padding, apply it locally. If every primary button needs tighter mobile padding, update the Button Preset — then use Extend Attributes (right-click context menu on any element) to propagate that change across the page. Keeping global changes in Presets and Variables rather than scattered across individual modules makes future edits far less painful.

Before sign-off, test on real devices alongside the canvas. Divi’s canvas is a simulation — actual browser rendering on hardware can differ, particularly for touch targets and font rendering. Use browser DevTools to supplement canvas checks for pixel-level spacing inspection.

Once structural consistency is confirmed across breakpoints, export your Design Variable values or document your Preset configuration before handoff — the design system, not any individual page, is now the source of truth for the build.