Webflow sync, pageviews & more.
NEW

Is there an alternative way, perhaps using Webflow, to switch to a tablet layout after 1150px and improve the text flow in the design when scaling from desktop to tablet?

TL;DR
  • Webflow’s breakpoints are fixed, but you can simulate a tablet layout at 1150px by adding custom CSS media queries targeting that range.
  • Design your desktop layout to start adapting at 1150px using responsive styles, or use duplicated elements with visibility toggles as a last resort.

You're looking to trigger the tablet layout in Webflow at a screen width larger than 991px, such as 1150px, and improve how your design adapts during scaling. Webflow doesn't allow direct resizing of default breakpoints, but there are workarounds using custom breakpoints and design strategies.

1. Understand Webflow’s Fixed Breakpoints

  • Webflow uses fixed breakpoints by default: Desktop (≥992px), Tablet (≥768 to 991px), Mobile (≤767px).
  • These breakpoints cannot be edited directly.

2. Use Custom Media Queries via Custom Code

  • In Page Settings or Site Settings → Custom Code, you can insert a custom CSS media query to style elements differently between 992px and 1150px.
  • Add something like the following to your Head or Before section:
    @media (max-width: 1150px) and (min-width: 992px) { /* custom styles */ }
  • Apply alternate styles using custom classes or utility classes.

Important: You must know CSS and manually write the styles using Webflow’s class names. These styles won't reflect visually inside the Webflow Designer.

3. Adapt the Desktop Layout to Respond Before Tablet Kicks In

  • Design your Desktop layout with responsive behaviors before it reaches 991px:
  • Use Flexbox or Grid with wrap settings.
  • Set widths in percentages or VW units instead of fixed pixels.
  • Use max-width constraints to limit overly wide containers before it hits the tablet breakpoint.

4. Use 1150px as a Design Reference Point

  • In the Webflow Designer, manually adjust elements at the Desktop breakpoint to respond around 1150px:
  • Set widths, font sizes, paddings, and images to behave properly at 1150px.
  • Use media preview handles to test how the design behaves around that width.
  • Then, start adjusting elements in the Tablet view once 991px is reached.

5. Use “Duplicate Elements per Breakpoint” (as a hack)

  • You can duplicate sections or elements and show/hide them at different breakpoints using Display: None / Block.
  • One version shown for ≥1151px, another adapted version revealed below that.
  • This adds complexity and can impact performance, so use only when absolutely necessary.

Summary

Webflow's breakpoints are fixed, but to adjust layout behavior from 1150px and downward, you can either use custom CSS media queries or optimize your desktop layout to begin shifting around 1150px. While you can’t move the tablet breakpoint itself, these techniques let you effectively control the transition to a tablet-like layout earlier.

Rate this answer

Other Webflow Questions