Back to updates
Feature

Design for even larger screens with 3 new breakpoints

Now you can customize your designs for larger screens with 3 new device breakpoints at 1280px, 1440px, and 1920px.

Design for even larger screens with 3 new breakpoints

<p>As laptops and external monitors keep getting bigger, Webflow’s keeping up with the times by adding not 1, not 2, but 3 new large breakpoints at 1280px, 1440px, and 1920px.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2610px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2610px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21cf1c_breakpoints%20new%20v2.jpg>"></div><figcaption>Styles applied at the new larger breakpoints cascade up, while styles applied at the existing breakpoints cascade down to smaller devices.</figcaption></figure><p>This means that Webflow projects now have 7 breakpoints, with the largest 3 being the new ones:</p><ul><li><strong>1920px:</strong> styles applied to screens 1920px wide and above</li><li><strong>1440px</strong>: styles applied to screens 1440px wide and above</li><li><strong>1280px:</strong> styles applied to screens 1280px wide and above</li><li><strong>Desktop (base):</strong> styles apply to all devices unless overridden at other device breakpoints</li><li><strong>Tablet:</strong> styles applied to screens 991px wide and below</li><li><strong>Mobile landscape:</strong> styles applied to screens 767px wide and below</li><li><strong>Mobile portrait:</strong> styles applied to screens 478px wide and below</li></ul><p>For a closer look at these changes and a walkthrough of updating a site to use these new breakpoints, check out our <a href="<https://webflow.com/blog/3-new-larger-breakpoints-in-webflow>">announcement blog post</a>.</p>


Launched on
April 9, 2020
Category

Related updates

No items found.