How do I turn off a specific interaction for only the mobile or tablet version of a website in Webflow?

Published on
September 22, 2023

To turn off a specific interaction for only the mobile or tablet version of a website in Webflow, you can use the built-in Hide on Devices feature. Here's how you can achieve this:

  1. Select the element that has the interaction you want to turn off for mobile or tablet devices.
  2. In the Element Settings panel on the right-hand side, scroll down to the Visibility section.
  3. Click on the Visibility dropdown and select the Hide on Devices option.
  4. Choose the device(s) you want to hide the element from. In this case, select Mobile or Tablet.
  5. By default, Webflow will hide the element on the chosen device(s). However, you need to make sure that the interaction is disabled for these devices as well.
  6. In the Interactions panel (under the Element Settings panel), locate the interaction you want to disable.
  7. Towards the bottom of the interaction settings, you'll see the "Only affect" section. Click on it and select the relevant device(s) (e.g., Mobile or Tablet) which you want the interaction to be disabled for.
  8. Save and publish your changes to see the interaction turned off for the specified mobile or tablet devices only.

Note: This feature is available on Webflow's CSS Grid and Flexbox layouts.

By using the Hide on Devices feature along with disabling the interaction for specific devices, you can tailor your website's interactions to provide a better user experience for different screen sizes.

Additional Questions:

  1. Can I apply different interactions on different devices in Webflow?
  2. How can I customize the layout for mobile and tablet devices in Webflow?
  3. Is it possible to hide elements on specific devices in Webflow?