Scale lock renders a breakpoint at a fixed width and uniformly scales it to fit the viewport — instead of reflowing. Good for fixed-aspect, media-heavy layouts.
Where: Breakpoint edit modal → Scale Lock — Edit a breakpoint and enable Scale Lock
Key ideas
- Reflow vs scale: Off = the page responds to width (media queries). On = fixed lockedWidth, scaled with transform.
- Per breakpoint: Set per breakpoint, or per-page for the base.
Steps
- Open a breakpoint’s edit (gear) modal.
- Enable Scale Lock and set the locked width.
- The page now scales proportionally instead of reflowing.
What scale lock changes
Normal responsive layout reflows at the viewport width using breakpoints and CSS. Scale Lock lays out at a fixed locked width and uniformly scales the whole result to fit, preserving composition/aspect relationships.
Good uses and trade-offs
- Useful for fixed-aspect, art-directed, media-heavy compositions.
- Text and controls also scale, which can make them too small at narrow viewports.
- Content height and browser scrolling need testing because the visual scale differs from layout width.
- Configure separately per breakpoint/page where required.
Tips
- Prefer true responsive reflow for text-heavy websites and accessibility-critical UI.
- Test pointer targets and readable font size on the smallest supported viewport.