Features / Breakpoints & states

Media queries become Webflow breakpoints

Webflow styles cascade from desktop to smaller breakpoints. CSS often goes in the opposite direction (mobile-first). FlowPaste calculates the style at each Webflow breakpoint and writes only the changes. The result in the Style panel is the same as a manual build.

Add to Chrome, free →See the demo
992768478
[IN]CSS
.title { font-size: 32px; }
@media (min-width: 768px) { .title { font-size: 48px; } }
@media (min-width: 1440px) { .title { font-size: 64px; } }
.btn:hover { background: #2f3fe0; }
[OUT]What you get in Webflow
  • Desktop: 48px (base)
  • Mobile landscape and portrait: 32px
  • 1440px breakpoint: 64px (enable this breakpoint in Webflow first)
  • .btn:hover → Hover state

Steps

  1. Paste your CSS as usual.
  2. Read the notes. FlowPaste tells you if you must enable large breakpoints.
  3. Paste the result in the Designer. Change the breakpoint in the Designer to see each value.

Limits

  • FlowPaste does not convert container queries and print styles.
  • If a breakpoint is unusual, FlowPaste uses the nearest Webflow breakpoint.

Questions

Which Webflow breakpoints are supported?

FlowPaste supports these Webflow breakpoints: mobile portrait (479px), mobile landscape (767px), tablet (991px), desktop, and the 1280, 1440 and 1920 large breakpoints.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →