Divi 5 gives you a complete Customizable Breakpoints system so you can control precisely when your layout changes between phone, tablet, desktop, and larger screens.
You customize the Divi 5's default breakpoints in one place, and those settings apply everywhere in the Visual Builder.
Instead of working with fixed device sizes, you decide which breakpoints you use and what widths they use.
What responsive breakpoints are in Divi 5
A breakpoint is a screen width where your design can change.
In Divi 5, each breakpoint is one "device" in the top bar (Phone, Tablet, Desktop, etc.). When you switch to that device and change settings, those changes apply only inside that breakpoint's range.
Divi 5 ships with seven predefined breakpoints:
Phone (Enabled by default)
Phone Wide
Tablet (Enabled by default)
Tablet Wide
Desktop (Enabled by default)
Widescreen
Ultra Wide
By default, only Phone, Tablet, and Desktop are active. You can turn the others on when you need more control.
Default vs optional breakpoints
Here's how Divi 5 treats each breakpoint:
Desktop
Always enabled.
You can't disable or edit Desktop. It acts as the base layer of your design.
Phone & Tablet
Enabled by default.
You can adjust their widths.
You can disable them if you really need to, but that's rare.
Phone Wide, Tablet Wide, Widescreen, Ultra Wide
Optional.
Disabled by default.
You can enable them and set custom widths when you need them.
You decide how many devices you want to design for. Simpler sites might stick to three. More complex layouts can use all seven.
How to open the Sitewide Responsive Breakpoints modal
You customize the Divi 5's default breakpoints from a single modal: Sitewide Responsive Breakpoints.
To open it:
Enable the Visual Builder on any page.
Look at the top bar and find the device icons (phone, tablet, desktop, etc.).
Click the three-dot icon next to the device icons.
Click Sitewide Responsive Breakpoints.
This opens the global breakpoint manager for your site.
How to turn extra breakpoints on or off
Inside the Sitewide Responsive Breakpoints modal, you'll see the complete list of available breakpoints with toggles.
To enable a breakpoint:
Find the breakpoint you want (for example, Phone Wide or Widescreen).
Turn its toggle On.
Save the modal when you're done.
Once enabled:
The breakpoint appears as a device icon in the top bar.
You can switch to it and make responsive changes just like the default ones.
To turn off a breakpoint:
Open the Sitewide Responsive Breakpoints modal.
Turn the toggle off for that breakpoint.
Save your changes.
Important behavior:
Turning off a breakpoint does not delete its styles. Divi stores them.
If you re-enable that breakpoint later, Divi restores those styles.
That means you can safely test extra breakpoints without losing work if you change your mind.
How to change breakpoint widths
To customize the Divi 5's default breakpoints, you mainly change the width values for each enabled breakpoint.
Inside the Sitewide Responsive Breakpoints modal:
Make sure the breakpoint you want to edit is enabled.
Click its width value (for example, "768px").
Type a new width value in pixels.
Move to the next breakpoint if needed.
Click Save at the bottom of the modal.
Divi enforces a "logical" order:
A breakpoint can't be set smaller than the breakpoint below it.
It can't be set larger than the breakpoint above it.
This still applies even if neighbors are disabled, so your widths always stay in order.
If a value doesn't make sense, Divi lets you know so you can fix it before saving.
How Divi 5 uses your customized breakpoints
Behind the scenes, Divi turns your breakpoint settings into CSS media queries, but you don't have to write any code.
The basics:
Phone, Phone Wide, Tablet, Tablet Wide use a min-width style system for their responsive values.
Widescreen and Ultra Wide use max-width rules for their responsive values.
Desktop acts as the base layer between the smallest and largest breakpoints and doesn't use media queries itself.
In practice:
You set breakpoint widths once in the Sitewide modal.
Everywhere you see device icons (top bar, settings modal panel), those are using your custom widths.
When you change a setting while a device is selected, Divi writes the correct responsive styles for that breakpoint's range.
You focus on design. Divi keeps the logic consistent.
How to switch between breakpoints while designing
Once you've customized your breakpoints, you work with them the same way as the defaults.
You can switch in two main places:
Top bar device icons
Click any device icon to switch the preview to that breakpoint.
Any changes you make now apply only to that breakpoint.
Device selectors in the element's settings panel.
Click on a module to open its settings panel.
Open the Device selection dropdown.
Choose the device for which you want to adjust the element's settings.
Switch between devices and set different values as needed.
These controls respect the breakpoint widths you set in the Sitewide modal.
Practical examples
Here are a few simple ways you might customize the Divi 5's default breakpoints.
Example 1: Add Phone Wide to handle large phones
If a lot of your traffic is on big phones:
Enable Phone Wide in the Sitewide Responsive Breakpoints modal.
Set Phone to something like
0px–480pxand Phone Wide to start at481px.Use Phone Wide to fine-tune layouts that feel cramped only on big phones (e.g., adjust padding or font sizes).
Example 2: Add Tablet Wide for landscape tablets
If tablet landscape layouts feel too close to desktop:
Enable Tablet Wide.
Set Tablet to start at a lower width (for portrait) and Tablet Wide for larger tablet screens.
Adjust columns, spacing, or font sizes at Tablet Wide without touching the full desktop.
Example 3: Use Widescreen and Ultra Wide for big monitors
If you design for large monitors:
Enable Widescreen and Ultra Wide.
Set them to match common large screen widths you care about.
Use them to cap content width, adjust max-widths, or tweak spacing so layouts don't feel too stretched.
Tips for customizing Divi 5 breakpoints
A few simple habits make breakpoint customization safer:
Change breakpoints on a test page first, not on a busy production site.
Keep breakpoints in ascending order and avoid tiny gaps unless you really need them. Divi will help enforce this.
Don't enable more breakpoints than you need. Start with one extra (like Phone Wide), test it, then add more if needed.
Remember that turning off a breakpoint doesn't delete its styles, so you can turn experiments on and off without losing work.
Once you're comfortable customizing the Divi 5's default breakpoints, the rest of Divi's responsive tools plug into that system, giving you precise control over how your site behaves on every screen size.