Website has 2 breakpoints inside of 1 breakpoint!

Design help General
1

So I’m editing the Mobile (l) breakpoint. Everything is how I want it to be but for some strange reason when I would publish my site and turn my phone sideways, It would show the styles for the tablet Breakpoint which made no sense. So after some troubleshooting I noticed that when the Mobile(l) breakpoint is set at 766 pixels everything is fine. However, as soon as go 1 pixel up and change it to 767 pixels (max width for Mobile (l) breakpoint), everything changes to the style of the Tablet Breakpoint but it is still in Mobile (l) breakpoint. I have even checked the styles panel after changing to 767 pixels to see if anything changed but nothing is changed. I’m not sure if I’m having system issues or if my website is really messed up. Any help is greatly appreciated.

767pixels
767pixels3161×1935 475 KB

766Pixels
766Pixels3176×1941 411 KB

Here is my site Read-Only: Webflow - T23 Productions

2

Hi there,

Let me explain Webflow’s breakpoint behavior. Webflow uses a cascade system where:

  • Mobile landscape: 767px and below
  • Tablet: 991px and below

When you set your width to exactly 767px, you’re seeing tablet styles because you’re at the upper boundary of the mobile landscape breakpoint. The tablet styles will cascade down until they’re explicitly overridden at a smaller breakpoint. To see mobile landscape styles, you’ll need to go to 766px or lower.

This cascade system ensures smooth responsive behavior across different screen sizes while maintaining design consistency.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.