Responsive design is key to a great user experience, especially across devices. With Subframe, you can customize your design for larger (desktop) and smaller (mobile) breakpoints.
Switching breakpoints
Subframe uses desktop-first responsive design, so editing pages starts at the Desktop breakpoint by default. Switch between Desktop and Mobile breakpoints in the top-right of the page editor.
Click on Breakpoint > Mobile to edit at the Mobile breakpoint
Click on Breakpoint > Desktop to edit at the Desktop breakpoint
Tip: adding, deleting, and moving elements affects all breakpoints.
Adding mobile overrides
Once you are editing at the Mobile breakpoint, you can change the style of elements specifically for the mobile breakpoint just as you normally would – including text styles, colors, size, layout, padding, borders, shadows, and visibility. A purple override indicator 
will appear for any styles you change.
Click on Breakpoint > Mobile
Edit any styles as you would normally
Subframe generates responsive React + Tailwind code for your designs
Once you apply an override, it will persist even if you make new changes in the Desktop breakpoint. To help you keep track of overrides, look for the phone icon 
in the layers panel.
Resetting mobile overrides
You can reset mobile overrides so that your elements look the same across all breakpoints.
To reset a particular style (colors, borders, layout, etc) of an element:
Click on the element
Find the style on the right-hand side
Click on the purple indicator
to remove any style changes you made on mobile
To reset all mobile styles of an element:
Right-click the element
Select Reset mobile overrides
How does Subframe export mobile to code?
Exported code uses the prefix mobile: for all style overrides. The Mobile breakpoint applies to viewports less than 767px wide using media queries.
Can I add or change breakpoints in Subframe?
Not yet – if you need additional breakpoints or want to adjust the size of existing ones, reach out to [email protected].