To add to what I said above — there isn't a built-in "current breakpoint" indicator in Flarum, but the easiest way to see where you are live is your browser's responsive/device mode (Ctrl+Shift+M in Firefox, the device toolbar in Chrome DevTools). It shows the viewport width as you drag, so you can watch exactly when each breakpoint kicks in.
For what to actually target in your Less, Flarum defines its breakpoints in framework/core/less/common/variables.less:
@screen-tablet: 768px@screen-desktop: 992px@screen-desktop-hd: 1100px
(There's no separate "phone" value — phone is just anything below tablet.)
You don't have to write the @media queries by hand, though. Flarum ships ready-made variables you can drop straight in:
@media @phone {
// max-width: 767.98px
}
@media @tablet {
// 768px – 991.98px
}
@media @desktop {
// 992px – 1099.98px
}
@media @desktop-hd {
// min-width: 1100px
}
There's also @tablet-up (min-width 768px) and @desktop-up (min-width 992px) when you want everything from a breakpoint upward.
One heads-up: you'll notice the maxes are .98 values (e.g. 767.98) rather than round numbers. That's intentional — it fixes a glitch where certain OS UI-scaling settings land the browser between two media queries and break the layout. So don't "correct" those to whole numbers.
If you still want a little on-screen readout of the active breakpoint, that'd be a nice tiny extension to build for your first one — but for day-to-day theming, responsive mode + these variables should cover you. Good luck with the baby steps!
