How Do I Add More Responsive Breakpoints in Elementor?
How Custom Breakpoints Work
Once enabled and configured, each additional breakpoint becomes its own selectable option in the editor's device preview switcher, with its own independent settings for every element, following the same cascading override behavior as the default breakpoints. This is particularly useful for designs targeting a specific device category (a very large desktop monitor, a small older phone) where the default three-breakpoint system doesn't give enough granularity.
When Extra Breakpoints Are Worth Adding
- A design that looks noticeably different on very large versus standard desktop monitors, needing a dedicated wide-desktop breakpoint.
- Content that breaks awkwardly specifically in the tablet-portrait range, needing its own adjustment separate from the general tablet breakpoint.
- Supporting particularly small or old mobile devices distinctly from standard modern phone sizes.
- Adding more breakpoints increases design maintenance overhead, since each one is another place settings can diverge and need reviewing after future changes — worth adding only where genuinely needed.
Adding Custom Breakpoints
- Go to Elementor → Settings → Layout (in Pro) and enable Additional Custom Breakpoints.
- Configure the specific device sizes needed for the design.
- Adjust settings only where necessary at each new breakpoint, relying on the standard cascade elsewhere.
Need finer responsive control set up across a complex design? See Elementor customization.