How to make my site responsive
Your site needs to look good across a variety of devices, from desktop to mobile, but preferable with the least amount of work.
There are different ways to make your site responsive. The best one depends on your content and audience.
Scaling
By default, Framer sites use the scaling options on mobile. That means that your desktop site gets displayed but scaled down using the meta viewport tag. This actually works quite well in a variety of scenarios (like more visual landing pages) because modern phones have high resolution screens and very smooth zooming and panning allowing users to quickly find the info the are looking for. Obviously this method requires the least amount of work: none at all.
Breakpoints
The most common way to make your site is using breakpoints. They allow you to tweak content and layout for different sizes. This is one of Framers best features; breakpoints are visually displayed next to each other, inherit content and layout and are seamlessly integrated with css using media queries. Read more in the breakpoint documentation.
Responsive Elements and Styles
Another way to make your site responsive is building on responsive elements like Stack and Grid, using options like min-width or flex-wrap to make them automatically adapt to different sizing. This requires a bit more planning and gives you a bit less options than full on breakpoints, but if you set things up correctly it can save you a lot of work.
