Breakpoint Indicator
The Designer's breakpoint bar, but on the published site — with the number you otherwise lack.
The lines sit at 479, 767, 991 and 1920. While dragging the window you cannot tell when you cross one — you only see the layout suddenly change, without knowing which level is responsible. The display names both at once: the level as an icon, the width as a number.
- AskWhat gets asked is not the window width but the browser itself — using the very media queries Webflow uses.
- ShowIcon and number sit side by side. The icon names the level, the number the exact width.
- ParkIn the way? Grab and drop — the display snaps into the nearest corner and stays there.
Add this <script> to your project's custom code
Once per project is enough, even if you use the solution on several pages: Project Settings → Custom Code → Head Code. The script loads alongside the page without holding up rendering; it runs once the page is in place and does nothing while no fpu attribute is there.
<!-- FlowPowerUser · Breakpoint Indicator -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/breakpoint-indicator.js"></script>Publish — there is nothing else to do
This solution needs no attribute and no element. As soon as the script sits in your project and the page is published, the display appears in the bottom right. It stays invisible in the Designer — the bar already exists there. Everything below is optional.
Park it in a corner that is out of your way
Grab it and drag — on release the display slides into the nearest of the four corners, keeping the same distance from the edge. The browser remembers which corner it was: next time it is back there. Works with mouse, finger or pen, and an accidental tap moves nothing — only a few pixels of movement turn a tap into a drag.
OptionalStarting corner and spacingDefault: bottom right, 24 px
These go on the body element. They decide where the display first appears — once you have dragged it by hand, your corner wins.
On the body
bottom-rightWhich corner the display starts in. An unknown value falls back to bottom right.24Distance from the window edge in pixels — the same in every corner.trueTurns off remembering the dragged corner. The display then starts in the attribute's corner every time.OptionalHiding it on individual pageswhen the script is project-wide
The script sits in the project once and therefore applies to every page. Where the display gets in the way — on a page you are showing someone — this attribute hides it without touching the script.
On the body
falseThe display stays away. The script still loads but does nothing.falseWrites one line to the browser console on start: current level, width and corner.Additional features
- The same lines as Webflow, not roughly the same
- Nothing is computed from the window width — the browser is asked using exactly the media queries Webflow's stylesheet uses. Otherwise the display would be one pixel off at the very edges, and useless precisely where you need it.
- The icons are the Designer's own
- Monitor, open laptop with its star, tablet, phone landscape and portrait — drawing for drawing the same as in the bar above your canvas. Redrawn icons would look similar and still be mistakable at a glance.
- The in-between levels are missing on purpose
- Above the base breakpoint Webflow also knows 1280 and 1440. Both share the desktop icon and would be indistinguishable — and the number next to it says more precisely where you are anyway.
- None of it gets in the page's way
- The display hangs at the end of the body, keeps its own stacking level and affects neither your layout nor your interactions. Anyone asking for less motion gets none — it then jumps into its corner without a transition.
- Your own code can hook in
- The solution registers with the shared roof as soon as it runs. You can register beforehand as well — the callback arrives either way.