Webflow Layout Techniques

Breakpoints

No items found.
Overview
Responsive Layout Techniques
Intro
102
Element Layouts
Aspect Ratio
Int
201
Responsive Image Annotations
Int
6:50
202
Collection List Alternating Item Layouts
Int
4:32
601
Collection Page & Collection List Layouts
Collection List Card Layouts
Int
4:32
601
Creating Variable Layout Options, per Collection Item
Int
11:46
602
Random List Items on Every Page Refresh
Intro
10:00
603
Variable Collection Item Sizes in a Grid Layout
Int
603
Limit Collection List Items by Breakpoint
Intro
10:00
604
Hide Collection List on Empty, or Item Qty
Intro
605
Responsive Pagination
Intro
605
Masonry Grid Layouts
Intro
607
Glossary w/ Letter Groupings
Intro
612
CMS Style Multiref-Matched Items
Intro
11:00
614
Master-Detail Layouts
Master-Detail Layouts
Intro
710
CMS-Driven Expando
Intro
19:42
714
CMS-Driven Modals
Intro
715
Special Layouts
Creating Leader Lines
Int
5:54
821
Photo Gallery Layouts
Int
821
Column Layouts
Int
822
Text Layouts
Int
823
Checkerboard Grid Styling
Int
824
Advanced Techniques
Breakpoints
Adv
901
No items found.

Webflow offers 7 breakpoints for design.

From largest to smallest, they are;

  • 1920px >= 1920px
  • 1440px >= 1440px
  • 1280px >= 1280px
  • Desktop (base) from 992px to 1279px
  • Tablet <= 991px
  • Mobile landscape <= 727px
  • Mobile portrait <= 478px

By default, the largest 3 breakpoints only exist if you add them, or if you are using a template that has added them.

Remember also how breakpoints work-

Desktop (base): styles apply to all devices unless overridden at other device breakpoints

Which is essential for understanding layout and styling techniques.

https://university.webflow.com/lesson/intro-to-breakpoints

How Breakpoints Work

Breakpoints work by defining media selector in Webflow's generated CSS files, so that different styles will only apply at specific screen widths.

Limitations

  • Unfortunately there is no way to change or redefine these to account for e.g. iPad screen sizes or other devices.
  • Likewise, there is no way to deliver specific CSS against e.g. specific device types or orientations.

Advanced Programming

Demo - https://webflow-breakpoint.webflow.io/

Cloneable - https://webflow.com/made-in-webflow/website/webflow-breakpoint

Custom CSS with Webflow Breakpoints

It is possible to write breakpoint-specific custom CSS using the same approach that Webflow uses.

Here we start with the default base styles, which would appear at the desktop breakpoint, and then we progressively add media queries to override those styles at specific breakpoints.

In the code, you can see all of Webflow's breakpoints progressively applied.

Executing Javascript on Breakpoints

In some special cases, you may want to execute javascript to perform actions or manipulate the page- but only on certain breakpoints.

Here's the basic code you need to make that happen;

https://test-cms-filter-cms-load.webflow.io/responsive-test

https://codepen.io/memetican/pen/QWJQeKe/bea1116878a9bb9f41b1a7147e404eb5?editors=1010

Removing Breakpoints

There is no way in the designer to remove breakpoints however Finsweet's chrome extension includes a tool that enables this.

Notes

https://codepen.io/memetican/pen/QWJmWLQ/4e6f08d1566ed34906043ce026794ce5

Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.