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

How can I embed social sharing buttons with dynamic links from Webflow CMS to ensure that only the current CMS page is shared and not the entire site?

Can a Vue.js application be inserted within the custom code block on a Webflow page? Has anyone successfully done this yet?

How can I improve the load time of my website on Webflow?

Why are some users unable to submit forms on our Webflow website and receiving an error message? We have noticed discrepancies in events recorded by Google Tag Manager and forms submitted. Could you help us identify the issue and provide a solution?

How can I create a zoom-in effect on an image inside a container using Webflow? I've tried using columns, an image, and a div with the parent set to "overflow: hidden" but the animation still isn't working. Can someone please guide me on where I might be going wrong?

How can I darken the rest of the page when a dropdown menu item is clicked in Webflow without the need for coding?

How can I resolve the issue of being unable to login to the Webflow editor using Safari on macOS due to the warning about third party cookies? I have already tried disabling extensions, unchecking the 'block third party cookies' setting in preferences, clearing cookies, and republishing the site but none of these solutions have worked. Is there a permanent solution for this problem? I am concerned about potential difficulties in the future since most users will be using Safari.

Is it possible to integrate a solution within Webflow to allow people to log in, instead of using third-party tools like Firebase, while ensuring that existing software and functionality remain intact?

How can I redirect the non-www version of my domain name to the www version using Webflow without having to publish the website in two places?

What are some hidden features of the smooth-scroll script in Webflow?

How can I identify the template being used in this Webflow site?

How can I prevent elements in the header of my Webflow website from being positioned incorrectly and cut off on Safari browsers? I have already tried positioning the elements with absolute positioning and setting the left and right tags to auto, but the margin I added to the left seems to be larger on Safari compared to Chrome.

How can I pass the UTM parameters of a submitter in a hidden field using Webflow form and integrate it with Mailchimp? I've tried various solutions from different sources but have been unsuccessful so far. Any ideas on how to make it work?

Does Webflow support IDEAL as a payment option and provide full STRIPE integration?

How can I fix the issue with the animation in Webflow where the top and bottom divs work correctly but the right and left divs do not display correctly in the preview or published site?

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?