Layout & Design · TOPIC

Breakpoints

Every Framer lesson that teaches or touches on Breakpoints

Lessons that teach this

3 lessons teach this topic

19:02

Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)

Layout & Design

37K views

April 8, 2025

3:33

Framer Update: Stacks, Breakpoint Switcher, Text Stroke

Framer Update, Layout & Design

14K views

May 23, 2024

2:14

Framer Update: February 2024 with Visual Overrides

Framer Update, Layout & Design

6.8K views

February 29, 2024

Where it comes up

227 moments across 48 lessons

Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)Joseph

0:22breakpoints in 0:53going to need a phone breakpoint to 0:59breakpoint as well for when things start 1:06breakpoint, we see the breakpoint bar 1:10breakpoint is called desktop and is set 1:19renaming this breakpoint on the layers

Practice: Designing Fluid Layouts in Framer (Fundamentals Lesson 24)Joseph

1:11breakpoint. In this lesson, we'll focus 1:13on the desktop breakpoint, but in the 1:17breakpoints work. Our breakpoints are 1:26sides of my breakpoint cuz it'll push 1:35breakpoint frame, we'll create frames 1:40width of the breakpoint and stack one

Setting Up custom cursors in Framer (Animation Lesson 16)Joseph

0:39desktop breakpoint and then coming down 2:27breakpoint selected, I'll come back down 3:21breakpoint, replace the little arrow 4:22desktop breakpoint. Come back down here 7:27breakpoint, come down here, click to add 8:28children of that breakpoint. So this

Framer Update: February 2024 with Visual OverridesBenjamin

0:13have three breakpoints if we select the 0:20breakpoint you'll see everything in the 0:28navigation in the phone breakpoint a few 0:38within this breakpoint meaning the 0:43the primary breakpoint which in this 0:45case is the desktop breakpoint to reset

Creating a fixed footer reveal in FramerJoseph

1:07page. The desktop breakpoint itself is 1:16breakpoint's going to make room. And if 1:17the page gets shorter, the breakpoint is 4:28cuz again, our desktop breakpoint is a 5:10breakpoint. So I'm going to select the 5:11desktop breakpoint and I'm going to come

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)Joseph

2:27sort of breakpoint the page the viewport 3:33breakpoint and I want to add a layout to 5:20now I have the desktop breakpoint 5:25desktop breakpoint I don't want to paste 5:39our desktop breakpoint set to fit the 11:40breakpoint itself so there we have it it

The Anatomy of a Framer Project (Fundamentals Lesson 2)Joseph

0:46breakpoints more on these in a moment 3:32with a big frame called a breakpoint 3:39breakpoint will be part of the web page 3:52us off with a desktop breakpoint that's 4:04breakpoints for tablets phones or 4:21breakpoints and designing responsibly

Framer Update: Stacks, Breakpoint Switcher, Text StrokeBenjamin

0:45breakpoints desktop tablet and phone and 0:51on the phone breakpoint if I give this a 1:07or the phone breakpoint with its 1:17breakpoint and command period to cycle 1:20to the next breakpoint and on Windows 1:30breakpoint between the Min and the max

Framer Update: Ticker EffectBenjamin

1:36looks like in a breakpoint, making for 2:41breakpoint, for example. Or on the phone 2:44breakpoint, we could decide to give all 3:01layouts for each breakpoint.3:21per breakpoint. In fact, we&#39;ve rebuilt

Using Layout Templates in Framer (Fundamentals Lesson 22)Joseph

1:55we have our breakpoint or break points 1:59and with my desktop breakpoint selected 2:24our breakpoint we have the nav bar 3:53breakpoint itself you'll see the name of 4:45breakpoint and here at the top of the

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

4:47use on the phone breakpoint I'll create 4:57default phone breakpoint width in 8:08breakpoint or in our phone variant 15:31our phone breakpoint is still broken 19:26breakpoint and that's pretty much it for

Creating persistent animations between pages in Framer (Animation Lesson 15)Joseph

2:44breakpoint selected and hitting paste 3:22the breakpoint itself. So I'm going to 6:36breakpoint selected, we see the 6:58thing. We'll select the breakpoint over

Framer Update: Relative Overlays. Easily design dropdown navigations in FramerBenjamin

9:18breakpoint and it will adapt to your 9:20existing breakpoints as well for example 9:28breakpoint 9:47of your breakpoints and if you'd like to

Framer Update: CMS ComponentsEdo

3:14other breakpoints. And you can see this 4:03breakpoint, the correct variant is 4:07its name is matching the breakpoint

Framer Update: Masonry GridsBenjamin

1:30unique sorting for each breakpoint,1:47type of device or breakpoint. For 1:55breakpoint where you would otherwise

Animating transitions between pages in Framer (Animation Lesson 14)Joseph

1:53select the desktop breakpoint. And with 1:55the breakpoint selected, we can come 7:08select the breakpoint for the page, and

Framer Update: REM Sizing for Responsive TypeBenjamin

0:40breakpoint values here are not 1:20any breakpoint and it's especially 3:19base value in the phone breakpoint to 18

Framer Update: Stack VariablesBenjamin

2:06phone breakpoint we want to set 2:31breakpoints here so that is fine let me 2:55used on the phone breakpoint got reset

Navigations: Mobile MenusBenjamin

0:18on a desktop breakpoint it even scales 1:39breakpoints in framer we can set the 5:39and within the phone breakpoint

Framer Event — Introducing Agents, Branching, and a new CommunityFramer

12:53breakpoints.13:33breakpoints, making the necessary layout 24:21breakpoint to see how it looks.

Layout Templates: Mobile Menus, Page Effects, and SidebarsBenjamin

0:27phone breakpoint so let's go ahead and 3:36select the entire desktop breakpoint

Min and Max Sizing in Framer (Fundamentals Lesson 11)Joseph

3:08one as this breakpoint gets wider and 4:29breakpoint gets smaller we have all the

Framer Update: Text Balance, Page Sorting, and moreBenjamin

0:29your breakpoint is a stack and you 0:34order override from the breakpoint next

Framer Update: Version HistoryFramer

1:39select the primary breakpoint and common 2:28pasting even maintaining the breakpoints

Framer Sites: Min Max and Aspect UpdateFramer

0:32you'll see that at certain breakpoints 1:07breakpoint

Generation, layout, and styling with Framer AgentsJoseph

8:24breakpoints.9:04breakpoints, making the necessary layout

Building an Expanding Article Stack in FramerFramer

0:43collection right next to the breakpoint

Introducing Design PagesFramer

0:06locked into its own breakpoints and

Intro to SEO & Accessibility in Framer (SEO Lesson 1)Justin

2:09us the tools to create breakpoints that

Generating layouts with AI using WireframerFramer

1:35course where we'll dig into breakpoints.

Framer Update: Selection StylesBenjamin

0:12breakpoint, go to styles and click on

Link and Color Styles in Framer (Fundamentals Lesson 18)Joseph

4:12breakpoint I believe if I head down here

Framer Update: Layout TemplatesBenjamin

2:41ahead and select the desktop breakpoint

Using the Insert Panel in Framer (Fundamentals Lesson 13)Joseph

1:06three breakpoint page layout for desktop

Fixed and Sticky Positioning in Framer (Fundamentals Lesson 9)Joseph

0:56is a direct child of the breakpoint

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7)Joseph

5:32entire breakpoint too so you never have

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)Joseph

7:06breakpoint frame similar to our layers

Absolute Positioning in Framer (Fundamentals Lesson 5)Joseph

1:58desktop breakpoint which is the parent

4 Ways to Update Form Status in FramerJoseph

2:09blue bar at the top of the breakpoint

Getting familiar with the Framer interface (Fundamentals Lesson 1)Joseph

3:26selecting a breakpoint shows only what's