Work with breakpoints
These instructions are reviewed against the app source. Final-installer walkthroughs are still pending. Check platform availability and requirements before installing. Windows is an updates list, outside the 1,000 beta places.
Adapt a page for different widths while keeping a shared starting design. Each secondary breakpoint inherits Primary independently and can override its values.
Before you start
Open a local website with Desktop, Tablet and Mobile frames. The website starter uses a desktop-first strategy. Save a .modo copy before reorganizing breakpoints across an existing project.
Adjust a smaller frame
- Choose Primary in Active frame and select the page's containing frame. Check its layout before making smaller-screen adjustments.
- Switch Active frame to Mobile. Confirm that the active-frame indicator changed.
- Select the same containing frame and set its left and right padding to
16. This creates or updates values for Mobile. - Switch back to Primary, then Tablet. Verify that their existing padding values remain unchanged.
- Return to Mobile. An overridden property has a purple dot. Click the dot for a property you want to return to its inherited value, then compare with Primary.
Text, supported properties, sibling order, newly added elements and hiding can be local to a secondary breakpoint. Names and locks identify the shared layer. Grouping, reparenting, component definitions and layout-type changes use Primary.
On a secondary frame, deleting a layer hides it at that breakpoint. It does not remove the shared layer from the whole project.
Understand width and range
Open Breakpoints to inspect or edit the configuration. Frame width is the width shown on the canvas. The minimum or maximum threshold determines when the breakpoint applies in the output; changing one is not the same as changing the other.
The starter's Mobile maximum is 599, which includes widths below 600 pixels. Tablet has a maximum of 1023. The editor displays each frame's effective active range. Keep its preview width inside that range.
Breakpoints apply across the project. Removing one affects pages, screens and components; review whether to move its overrides or drop them before confirming.
Check your result
Mobile has the intended spacing, Primary and Tablet retain theirs, and each preview width matches its active range. Use Preview and resize the browser to inspect the transitions between layouts.
Common problems
- A change on Tablet does not reach Mobile: secondary breakpoints inherit Primary independently.
- A structural action is blocked: switch to Primary and review the shared effect before repeating it.
- A Primary edit does not appear elsewhere: check for an existing override on the affected frame.
Related guides
Need a correction? Tell us