2.1: How to use Breakpoints

Understanding Breakpoints in Framer

  • Every new project in Framer starts with a default desktop breakpoint, which is 1200 pixels wide.

  • The desktop breakpoint serves as the primary breakpoint, and changes made here will cascade down to smaller breakpoints.

  • You can resize the primary breakpoint to any size you prefer.

  • Additional breakpoints, like tablet or phone, can be added to preview your design on different devices.

  • Changes made to the primary breakpoint will affect the other breakpoints, but you can override specific properties within individual breakpoints.

Files

Resources

Resources