Webflow sync, pageviews & more.
NEW

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
  • Use Webflow’s Display settings to hide or show elements per breakpoint by selecting the element, switching to the desired viewport, and setting Display: None or Block/Flex accordingly.
  • Start with Desktop view and adjust visibility down through smaller breakpoints, ensuring each layout version is shown or hidden as needed at each size.

You're trying to show different layouts for mobile and desktop, but hiding elements affects all breakpoints unless done correctly. In Webflow, visibility must be set per breakpoint, using the proper display settings.

1. Use Display Settings by Breakpoint

  • Webflow allows you to set display settings (e.g., Block, Flex, None) individually at each breakpoint.
  • Select the element you want to hide on a specific viewport.
  • In the Style panel, scroll to the Layout (Display) section and set it to Display: None on the unwanted breakpoints.

2. Start from the Desktop Down

  • Webflow uses a mobile-first structure visually in the Designer, but styles cascade from larger to smaller breakpoints.
  • So, if you hide an element on Desktop, it will be hidden by default on Tablet, Mobile Landscape, and Mobile Portrait unless you explicitly override it.

3. Show or Hide Elements Correctly

  • Let's say you want to show Layout A on Desktop and Layout B on Mobile:
  • Select Layout A, go to Tablet, Mobile views, and set Display: None.
  • Select Layout B, go back up to Desktop and Tablet, and set Display: None there.
  • Then go to the Mobile view, and change Layout B to Display: Block (or Flex/Grid).

4. Use the Visual Breakpoint Controls

  • Use the navigation bar at the top of the Designer (Desktop, Tablet, Mobile Landscape, Mobile Portrait) to switch between views.
  • Make sure you're setting visibility per device using these tools.

5. Use Custom Classes If Needed

  • You can also create duplicate elements with custom class names like desktop-header and mobile-header and then control their visibility per breakpoint using the Display setting.
  • Do not rely on the Eye icon in the Navigator—that hides elements entirely, not responsively.

Summary

Set visibility using the Display property (none/block/flex) on a per-breakpoint basis in Webflow's Style panel. If you set an element to display “None” on Desktop, be sure to override it at smaller breakpoints if you want it to appear there. This is how you create different layouts per device.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow support additive overlay?
What are the key features and integrations available in Webflow?
How can I style the second, third, and fourth slides after the currently active slide in the Webflow Slider using CSS or JavaScript?
How can I utilize Webflow to follow a tutorial and make the necessary changes to my Marco template if I'm inexperienced and struggling with the interface?
How can I add the onClick attribute to elements in Webflow for analytics purposes?
How can I find the Theme Name of a website developed using Webflow?
Is there a way to add a video to my Costa Rica Glamping webpage in Webflow without slowing down the page or sacrificing video quality?
Where can I find better tutorials to learn Webflow, particularly regarding the "Collection" feature, as I am finding the Webflow University lessons difficult to follow?
How can I redirect my GoDaddy domain name to my Webflow site?
How can I make a Webflow button directly call a function like the custom code button in the example?
How can I style the headings in a CMS Rich Text field that are also links in Webflow?
How can I use MixitUp Filters on collections with more than 100 items in Webflow?
How can I enforce numeric input in form input fields in Webflow?
What is the URL of the custom fonts from Webflow, such as 'HK Grotesk', that can be obtained for use in the CSS Editor of Acuity Scheduling?
How can I replace images in a Webflow template that are labeled "for illustration purposes only" instead of deleting them?
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?
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?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?