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 is the purpose of Webflow?

How can I create a hero slider behind the nav bar and heading in Webflow without affecting their position?

How can I create lists in rich text elements using Webflow?

How long does it typically take to duplicate a Webflow project? I have attempted twice with several hours in between, but the duplicated projects are not appearing. The website contains numerous CMS items and is of considerable size, so I'm unsure why the duplication process would take so long. Is a lengthy duration common for duplicating projects in Webflow?

What happens to a site on Webflow if I purchase a Site Plan for a specific number of months, publish it to a custom domain, and then let the plan expire? Will the site still exist on Webflow even if I can't edit it and it remains locked in my dashboard?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How to duplicate a CMS collection on the same website in Webflow?

Why are background videos not playing on the desktop version of my Webflow website, even though they work when toggling the preview?

What is the issue with the positioning menu in Webflow? Does it not appear when trying to layer div blocks over each other?

How can I fix the issue with my Webflow dropdown menu not expanding in Chrome, even though it works in Firefox and Edge?

How can I maintain a fixed size of 600x600 for a video embed on mobile view using Webflow?

Why does my website on Webflow only show in Google search when searching for the specific domain name, but not when searching for other related keywords or phrases?

How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?

How can I easily pull custom parameters from a page URL and replace them with placeholders in Webflow?

How can I make individual divs show/hide on hover for each accreditation image in Webflow using legacy interactions?

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 dynamically redirect to a CMS created after form submission in Webflow?

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 I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

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?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?

How can the text color be changed for custom input fields on Webflow?