One site, three layouts: checking breakpoints before you publish
Framer lays out desktop, tablet and phone separately. Here is what to look at on each one before the site goes live.
A Framer site is not one layout that shrinks to fit. Desktop, tablet and phone are three layouts, set up separately, and every template here ships with all three. That is why they hold up on a phone, and also why an edit on one can leave the others behind.
How breakpoints work in Framer
Framer's default breakpoints are 1200, 810 and 390 pixels wide, and each one is its own version of the page. Changes you make on the desktop layout carry down to the smaller ones, but anything you change on tablet or phone stays there. That is useful when a heading needs to be smaller on a phone, and a trap when you forget you did it.
What to check on each one
- Headlines. Read every heading at phone width. A line that fits on desktop can wrap to one word per line.
- Navigation. The menu usually folds away on a phone. Open it and check every link still goes somewhere.
- Pictures. A crop that frames a face on desktop can cut it off on a narrow screen. Check where each image is anchored at every size.
- Hidden layers. A layer can be hidden on one breakpoint and shown on another. If something you added only appears on desktop, this is usually why.
- Forms and buttons. Buttons should be easy to hit with a thumb, and a form should fit without scrolling sideways.
- CMS content. Long titles are where layouts break first. Test with your longest entry, not the sample one.
Preview first, then use a real phone
The preview in Framer shows each breakpoint, and you can drag its width to see what happens between them. Then publish to the free Framer address and open it on an actual phone before you connect a domain. Scrolling with a thumb finds problems a narrow window hides.
Why every template page shows all three
Every template on Openfile has a section called Desktop, tablet and phone, with its home page captured from the published site at 1440, 810 and 390 pixels. Nixa is a good one to look at. It is the quickest way to judge a template before you buy, and a useful picture of what your version should look like when you are done.