Webflow sync, pageviews & more.
NEW

Can I change the tablet breakpoint in Webflow from 990px to 1300px width for a vertical menu on my website?

TL;DR
  • Webflow’s tablet breakpoint is fixed at 991px, but you can simulate a 1300px breakpoint using custom CSS media queries.
  • Add your custom styles via an Embed element or Site-wide code with @media (max-width: 1300px), and test responsiveness using browser dev tools.

Webflow does not allow changing the built-in tablet breakpoint from 990px to 1300px, but you can work around this using custom CSS and specific design techniques.

1. Understand Webflow’s Fixed Breakpoints

  • Webflow uses fixed breakpoints: Desktop (> 991px), Tablet (991px–768px), and Mobile (Portrait & Landscape).
  • You cannot directly adjust the 991px tablet breakpoint to a wider screen size like 1300px.

2. Use a Custom Media Query with Embed Code

  • To apply tablet-style layout at 1300px, you can use the Embed element to add custom CSS.
  • Embed a media query like:
    @media (max-width: 1300px) and (min-width: 991px) { /* CSS styling */ }
  • This allows you to create a custom responsive range for vertical menu changes beyond Webflow’s default tablet settings.

3. Duplicate Tablet Design Styles for 1300px

  • In Desktop view, make your vertical menu styles.
  • Add a combo class or distinct class to key elements.
  • Use the Custom Code Embed or a Site-wide <style> inside Page Settings or Project Settings > Custom Code to control when the layout switches, such as:
    @media (max-width: 1300px) { .vertical-menu { display: block; } }

4. Preview and Test Across Multiple Devices

  • Webflow’s preview won’t show custom breakpoints, so test using your browser’s developer tools by resizing the window manually.
  • Make sure your interactions, navbar behavior, and styles all respond as expected between 1300px and 991px.

Summary

You cannot change Webflow's predefined tablet breakpoint from 990px to 1300px, but you can simulate a higher breakpoint using a custom media query with CSS in an Embed element or Site Custom Code. This allows you to trigger your vertical menu design at 1300px while maintaining Webflow’s default structure.

Rate this answer

Other Webflow Questions