Breakpoint
A breakpoint is a screen width at which your layout is allowed to change, so the same page can look right on a phone and on a wide monitor.
In plain English
A three column row is lovely on a laptop and unreadable on a phone. A breakpoint is the line in the sand where you say: from here down, stack them.
In Elementor you see this as the desktop, tablet and mobile icons at the top of every setting. Each device is really a breakpoint, and the value you type only applies from that width downward.
Why it matters
More than half of the people reading your site are holding a phone. If you only design at the width of your own screen, you are designing for the smaller half of your audience by accident.
Breakpoints also stop you from fixing the wrong thing. A layout that breaks at 900 pixels does not need a new design, it needs one value changed at one breakpoint.
How it works
-
You design the desktop view firstOr the mobile view first, if you prefer. Either way, one view is the starting point.
-
You switch to a smaller deviceThe builder narrows the canvas to that breakpoint’s width so you see what the visitor sees.
-
You change only what is brokenFont sizes, column direction, padding. Anything you do not touch keeps inheriting the larger view.
-
The browser picks the right setOn a real device it reads its own width and applies every rule up to that breakpoint.
Editing mobile does not affect desktop, but the reverse is true
Values flow downward. Change something on desktop and tablet and mobile inherit it unless you have already overridden them there. That is why a change can look like it did nothing on the small screen.