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.

In Webflow, you have full control over creating different layouts for mobile and desktop versions of your website. Although Webflow doesn't have a direct option to make elements visible on desktop or mobile only, you can achieve this by using conditional visibility and the "Display" property.

Here's how you can create different layouts:

1. Start by designing your mobile layout: Set up your layout for the mobile version of your website using the appropriate breakpoints. Ensure that all the elements you want to show on mobile are properly positioned and styled.

2. Duplicate the necessary elements: Instead of hiding elements for the desktop version, it's better to duplicate them. This way, you'll have separate elements for mobile and desktop, giving you more control over styling and positioning.

3. Adjust the duplicated elements for the desktop version: Hide the duplicate elements meant for the mobile version using the "Display" property. Select each duplicated element, go to the Style panel, and under the "Display" section, choose "None" to hide it. This will ensure that those elements are only visible on the mobile version.

4. Fine-tune the desktop layout: With the duplicated elements hidden on the mobile version, you can now style and position the elements that are intended for the desktop version. Adjust margins, padding, widths, and any other styles as necessary to create the desktop layout.

5. Test and refine: Use the Preview mode in Webflow to check how your layout looks on different devices. Ensure that your changes are displaying correctly and that the intended elements are visible on their respective devices.

By following these steps, you can create different layouts for mobile and desktop versions in Webflow without one layout affecting the other. It may require some additional elements and adjustments, but it gives you the flexibility to design unique experiences for different devices.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Where can I adjust the column and gutter widths of the guide overlay in Webflow?

How can I integrate the form on my Webflow page to a Sendgrid account for email capture, considering the limitations of the Sendgrid widget and the lack of necessary functions in Zapier?

How can I integrate custom code (such as JavaScript) into Webflow to allow users to copy and paste HTML and CSS from a resume they like on my website into their own Webflow account, similar to how Flowbase does it?

How can I set up anchor links and scroll to specific sections in Webflow, with the right div having overflow scroll, and the corresponding link highlighted when a section is in view?

How can I change the default image shown when sharing my Webflow website on platforms like LinkedIn?

How can I change the font color of the links in my Webflow Navbar when hovering over it and when hovering over the links directly?

Is there an issue with Webflow causing intermittent 504 Gateway Timeouts on custom domains after today's maintenance, as indicated by increased latency starting at 4:30pm UK time?

How can I make the block containing text in Webflow grow to the same height as the text, without it pushing up or down the "hide text" button?

How can I make it mandatory for users to choose one of the suggestions from Google Place Autocomplete before submitting a form on a landing page in Webflow?

Are there any issues when using Webflow where navigation items linked to home page sections no longer work when on other pages, and should they be linked with URLs instead?

How can I edit the text content in a dropdown menu in Webflow?

How can I create a Category Collection Page in Webflow that only displays articles related to a specific category, without affecting other category pages?

What could be causing the z-index issues with a sticky header in Safari and iOS Safari, while it works correctly in Chrome, and how can it be resolved using Webflow?

How can I create an interaction for a scrolling text on loop on the homepage of my website in Webflow?

Is there a way in Webflow to select which specific forms send email notifications, as I have three active forms on my site and users are requesting to receive emails from only one form and not the others?

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

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

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 fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

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

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

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

How can I make the menu close when a link is clicked 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 add user input to the end of the redirect URL in Webflow?