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.
- 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.