Webflow Layout Techniques

Breakpoints

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

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

Videos
No items found.
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.