We're in beta! Don't mind the bugs.
Helpful resources
Need more help?
Check out the Webflow community.
Free Webflow templates
The best free Webflow templates.
Hire a Webflow expert
Partner with a certified expert.
Rate this answer
Good
Good
Bad
Bad
Share
All posts
Custom code

Is there a way to force iPhones with extra long screens, like the iPhone X/XS/XR series, to display in the Mobile-Landscape breakpoint on Webflow instead of the Tablet (Portrait) breakpoint?

Published on
September 22, 2023
Note
CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Yes, there is a way to force iPhones with extra long screens, like the iPhone X/XS/XR series, to display in the Mobile-Landscape breakpoint on Webflow instead of the Tablet (Portrait) breakpoint.

To achieve this, you can follow these steps:

  1. Open your project in Webflow Designer.
  2. Click on the breakpoint selector at the top of the Designer.
  3. Select the "Mobile Landscape" option.
  4. Resize the Designer viewport to match the dimensions of the iPhone X/XS/XR series (e.g., 812px width and 375px height).
  5. Design your website layout specifically for this resolution, ensuring that it functions well and looks good on iPhone X/XS/XR screens.
  6. Once you're done designing for this specific breakpoint, continue designing for the other breakpoints as usual.

By following these steps, you will be able to target the specific dimensions of the iPhone X/XS/XR series and design the website accordingly, forcing it to display in the Mobile-Landscape breakpoint in Webflow.

Please note that while this method can help optimize the website for iPhones with extra long screens, it is important to ensure that your website still looks and functions well on other devices and screen sizes.

Additional Questions:

  1. How can I design specifically for the iPhone X/XS/XR series on Webflow?
  2. What are the dimensions of the iPhone X/XS/XR screens?
  3. Can I optimize my Webflow website for different screen sizes?
Is there an alternative solution for creating a custom cursor on Webflow's free tier without using CSS?
What is causing the slow loading speed on the website homepage specifically related to the third-party code of Stripe and Paypal?
How can I find the src of an uploaded image to use in custom code on Webflow?
Is there a fix for the bugs that only appear on Safari Desktop, but not on Chrome or iOS, for my Webflow project?
How can I change the default positioning for fixed elements in Webflow from being relative to the body to being relative to the viewport?
How can I fix the issue where clicking the anchor link on my Webflow site scrolls to the top of the page instead of the bottom of the navigation bar?
What can I do to fix the issue with the modal popup appearing incorrectly in Chrome when following the Webflow tutorial?
How can we maintain the URL hierarchy and replace the content of a specific page with a static page in Webflow?
How can I create a custom tooltip in Webflow using Chart.js?
How can I call a Webflow interaction using jQuery or JavaScript?
Home
Categories
Tutorials
© 2023 CommunityFAQ. All rights reserved.
TermsPrivacyCookies
CommunityFAQ is not affiliated with Webflow. This is a personal project to help answer Webflow's questions and a test project to implement new strategies while working with larger a larger CMS. CommunityFAQ is reader-supported and some links may be affiliate links.