On Webflow, how can I ensure that my live mode and preview mode have the same appearance for desktop and laptop screens while excluding iPhone optimization?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To ensure that the live mode and preview mode on Webflow have the same appearance for desktop and laptop screens while excluding iPhone optimization, you can follow these steps:

Identify the breakpoints: The first step is to identify the breakpoints in Webflow where you want to make the necessary adjustments. In this case, you'll need to focus on the breakpoints for desktop and laptop screens.
Adjust settings for desktop and laptop breakpoints: Open the Style panel in the designer and navigate to each breakpoint (desktop and laptop). Make sure that the styles you apply are consistent across both breakpoints.
Use custom code: If there are specific elements or styles that are not behaving consistently across preview and live mode, you can consider implementing some custom CSS code. Webflow allows you to add custom code on a per-page or site-wide basis. Utilize this option to target any elements or styles that need fine-tuning.
Exclude iPhone optimization: To exclude iPhone optimization specifically, you can use the built-in Webflow feature called "Hide on larger screens". With this feature, you can choose to hide specific elements or sections on larger screens, thereby excluding them from iPhone optimization.

Select the element or section you want to hide on larger screens.
In the Settings panel, choose the Display settings for the selected element or section.
Enable the "Hide on larger screens" option.
By using this feature, you can make sure that any changes you make for desktop and laptop screens won't affect the iPhone optimization.

Preview and test: Once you have made the necessary adjustments, preview your site in both live mode and preview mode. Test it on various desktop and laptop screens to ensure consistent appearance.

By following these steps, you can ensure that your live mode and preview mode have the same appearance for desktop and laptop screens while excluding iPhone optimization.

Additional Questions:

How can I customize styles for different breakpoints in Webflow?
Can I add custom code to my Webflow site?
Is it possible to hide elements on specific devices using Webflow?

How can I add a CNAME value for a custom domain in Webflow if there is already a CNAME for a subdomain that cannot be deleted?

Can a subscription based model be integrated with Webflow using Stripe? How can users select quantities and display different prices based on the package they select?

What are some possible solutions to the issue of a Vimeo embed video not playing on mobile in Webflow?

Can Webflow accept and use a compressed Lottie file format for animations?

What could be causing the "Disable scroll offset when fixed" in the Webflow Navbar to not work correctly?

Is it possible to favorite items on subsequent pages or with search filters applied using the pagination feature of attributes and the favorite feature of Jetboost on the website?

Has anyone successfully integrated Webflow with Aweber to get subscribers to an email list?

Can anyone help me with connecting a Mailchimp email form to my Webflow site?

Is there currently a way to import 900 users in Webflow membership, or will this feature be available in the future?

What should I do if my DNS provider says the hostnames for the A records in Webflow are invalid?