How can I create different layouts for mobile and desktop versions in Webflow? I have already created a layout for the mobile version, but when I hide it on the desktop, it also gets hidden on the mobile version. Webflow does not have an option to make it visible on desktop or mobile only.

TL;DR

Duplicate sections for desktop and mobile, assigning unique class names.
Use display: none to hide the desktop version on smaller breakpoints and the mobile version on larger breakpoints.
Leverage Flexbox or Grid to adjust layouts without excessive duplication.
Manage visibility settings in the Navigator and use display: none to control breakpoints properly.

Webflow allows you to create different layouts for mobile and desktop using visibility settings and display properties. However, hiding an element in one breakpoint applies to all smaller breakpoints as well. Below is a step-by-step guide to creating separate layouts for mobile and desktop.

1. Duplicate the Sections for Different Layouts

Create two versions of the layout: one for desktop and one for mobile.
Ensure each version has unique class names to avoid style conflicts.

2. Use Webflow's Display Settings to Hide Sections

Select the desktop version of your layout.
On smaller breakpoints (tablet, mobile), set display: none for this section in the Style Panel (under Layout > Display).
Select the mobile version, then on desktop and tablet breakpoints, set display: none.

3. Utilize Flexbox or Grid for Responsive Adaptation

Instead of duplicating entire sections, try using Flexbox or Grid with CSS overrides to adjust the design for each breakpoint.
This reduces duplicate content and improves performance.

4. Adjust Content Based on Breakpoints

Use the "Show/Hide" settings wisely in the Navigator panel to ensure only the correct layout appears at each breakpoint.
Webflow does not allow visibility toggling for specific breakpoints, so use display: none instead.

Summary

To create different layouts for mobile and desktop in Webflow: duplicate the sections, use "display: none" on inappropriate breakpoints, and leverage Flexbox/Grid for better adaptation. Since Webflow applies visibility changes across all smaller breakpoints, managing display: none per breakpoint is the key solution.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What are some third party tools or integrations that can be used with Webflow?

Can Webflow allow users to add multiple credit cards to their account for easier payment processing and avoid the need to switch between personal and company cards?

How can I make my new ConvertKit form in Webflow behave like my old Mailchimp form, showing the Success/Error messages instead of a JSON response?

Is there a way in Webflow to override the CMS content in a symbol, so that the same symbol can display different content?

What is a solution for producing an automated email with the price of a customized order and integrating a CRM system for lead generation on a Webflow website?

Is there a way to animate the border lines of button menus in Webflow, wherein the line appears from left to right as if it's being drawn, instead of just changing the width?

How can I start a Webflow interaction using custom JS code with only the data-w-id?

What is a solution to schedule a daily task in Webflow to run a script and avoid CORS blocks in the console?

How can I clip an image with a custom svg shape in Webflow?

Why does the Request demo button work on my pricing page but not on my home page in Webflow?

When will subscription elements be introduced into e-commerce on Webflow and are there any details available about the functionality?

Can the section in my Webflow Home page, where a CMS collection of events is displayed, be automatically hidden when there are no events?

Can Webflow be used to create a web app with features like membership login and integration with third-party tools like Airtable and Zapper, without the need for extensive coding and hosting management? What are the main limitations compared to building a custom web app on Firebase for serverless database API integration?

How can I display items from the Collections and Products in the Preview page on Webflow?

How can I add a robots.txt file in Webflow to address potential SEO concerns raised by 'TotalSEO'?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?