How can I add content in Webflow so that it only displays on the mobile view and not the desktop breakpoint?

Published on
September 22, 2023

To add content in Webflow that only displays on the mobile view and not the desktop breakpoint, you can use the built-in feature called conditional visibility. This allows you to control the visibility of elements based on various conditions, such as device width.

Here's a step-by-step guide on how to achieve this:

  1. Open your Webflow project and navigate to the desired page or create a new one.
  2. Once you're on the page, select the element or section you want to add content to.
  3. In the right sidebar, click on the "Settings" tab, which looks like a gear icon.
  4. Under the "Display" section, you'll find an option called "Visibility".
  5. Click on the drop-down menu next to "Visibility" and select "Conditional Visibility".
  6. A new panel will appear with options to set conditions for the element's visibility.
  7. Click on the "Add Condition" button.
  8. In the condition settings, select "Device" as the first parameter.
  9. In the second parameter, choose "Width".
  10. For the third parameter, you can choose from "less than," "greater than," or "equals to."
  11. Enter the desired value to determine at which device width the content should be shown or hidden. For instance, enter "992" to target the mobile device width.
  12. Finally, toggle the visibility switch to either show or hide the element based on the condition.

Your content will now only be displayed on the mobile view and hidden on the desktop breakpoint. Repeat these steps for any other elements you want to conditionally display on specific device widths.

By using conditional visibility in Webflow, you can ensure a seamless and optimized user experience for mobile users without cluttering the desktop view with unnecessary content.

Additional Questions:

  1. How do I hide content on mobile view and only display it on the desktop breakpoint in Webflow?
  2. Can I use conditional visibility in Webflow to show different content based on the device?
  3. Is it possible to create responsive designs in Webflow that adapt to different screen sizes?