Hi everyone, this is my first time here looking for help!
I’m looking for help with a problem related to breakpoints in Webflow. When I design within the canvas, the mobile landscape breakpoint works correctly, and I can apply different styles than those for tablets without any issues. The problem arises when I test the website on a real mobile device: when the device is in landscape mode, it doesn’t use the mobile landscape breakpoint but automatically uses the tablet breakpoint styles. This makes the design look bad on a real mobile device in landscape mode because the CSS being applied is designed for larger screens. In short, everything works as it should in the designer, but on a real device, Webflow ignores the mobile landscape breakpoint and jumps directly to the tablet breakpoint, making it impossible to balance both designs. I would appreciate any guidance or solutions to avoid this behavior and ensure that real mobile devices actually use the mobile landscape breakpoint.
Since we can’t change the native breakpoints yet, the best fix is to drop an Embed element onto your page and add a small block of custom CSS inside style tags. You can write a specific media query that targets orientation: landscape and a max-height limit to force your specific classes to keep their mobile layout, even if the device width is technically large enough to trigger the tablet view.
Here is a snippet you can paste into an HTML Embed element on your page. This media query targets devices that are wide enough to hit the tablet breakpoint but are short enough to likely be a phone in landscape mode. You just need to replace .your-class-name with the actual class of the element that looks wrong, and then add the specific styles you want to apply inside the brackets.
<style>
@media screen and (min-width: 768px) and (max-height: 500px) and (orientation: landscape) {
.your-class-name {
/* Add your mobile landscape styles here */
width: 100%;
padding: 10px;
font-size: 16px;
}
}
</style>
The code you need will be specific to your requirements and layout. This is just an example.
Should you desire custom development, let me know. I do offer billable services.
This actually happens because Webflow’s mobile-landscape breakpoint doesn’t follow real device behavior. In the Designer, Webflow treats mobile-landscape as a separate breakpoint, but on actual phones, the viewport width in landscape is wide enough to trigger the tablet breakpoint.
Most phones jump past the mobile-landscape width entirely when rotated, so the browser applies tablet CSS, not the mobile-landscape styles you set in Webflow.