Custom Breakpoints
This page demonstrates how Custom Breakpoints in Divi Responsive Helper change when Divi switches between desktop, tablet, and phone layouts, affecting how modules respond at different screen widths.
Gallery Module Layout Changes
This example shows how changing the Tablet-to-Phone breakpoint affects the number of gallery columns on smaller screens. With the phone breakpoint set to 420px, the tablet layout (2 columns) remains active on screens wider than 420px instead of switching to the phone layout at 767px.
Menu Module
This example shows how setting a custom screen size displays the hamburger menu at 1020px instead of the default 980px.
Blurb Module
Desktop
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Tablet
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Mobile
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Note: Resize the browser window to observe how changing the tablet and phone breakpoints affects responsive layouts in real time.