Breakpoints
← Animationsyank.design
Responsive Recovery
320pxactive
Frame
Yank.
☰
mobile
768px
Frame
Yank any site.
DocsPricing
tablet
1200px
Frame
Yank any site, get code.
DocsPricingBlogSign in
desktop
framer.production.css · 14.2 kBscanning
/* hero.css — 1.4 kB */
.framer-1ujxwsf {
font-size: 64px;
padding: 48px;
flex-direction: row;
}
@media (max-width: 1199px) {
.framer-1ujxwsf {
font-size: 48px;
padding: 32px;
}
}
@media (max-width: 767px) {
.framer-1ujxwsf {
font-size: 32px;
padding: 16px;
flex-direction: column;
}
}
@media (max-width: 319px) {
.framer-1ujxwsf {
font-size: 24px;
}
}
@media (min-width: 1440px) {
.framer-1ujxwsf {
font-size: 80px;
}
}
Breakpoint set
320@max-width: 319
—
768@max-width: 767
—
1200@max-width: 1199
—
1440@min-width: 1440
—
∩ of constraints
{ 320, 768, 1200, 1440 }
Frame.tsx · reconstructedsmmdlg
<Frame
className="
text-[32px] p-4 flex-col
md:text-[48px] md:p-8 md:flex-row
lg:text-[64px] lg:p-12
xl:text-[80px]
"
>
<Logo />
<NavLinks />
</Frame>

Breakpoints

Framer encodes responsive variants as numbered breakpoints inside media queries. yank scans every @media rule, intersects the constraints, infers the canonical breakpoint set, and rebuilds the responsive component tree with clean Tailwind sm:/md:/lg: prefixes.