Can I disable the custom CSS code on mobile devices in Webflow?

Published on
September 22, 2023

Yes, you can disable custom CSS code on mobile devices in Webflow. By default, any custom CSS code you add to your project will apply to all device sizes unless you specifically target certain breakpoints. However, if you want to disable the custom CSS code on mobile devices, you can use the built-in visibility settings in Webflow to achieve this. Here's how:

  1. Select the element that contains the custom CSS code you want to disable on mobile devices.
  2. In the Style panel, click on the settings icon (gear icon) next to the element's class name.
  3. In the Visibility section, click on the "+ New Condition" button.
  4. In the drop-down menu that appears, select "Device Width".
  5. Set the condition to "is less than or equal to" and enter the maximum width at which you want the custom CSS code to be disabled on mobile devices. For example, if you want to disable the code on devices with a width of 767px or less (i.e., smartphones), you can enter "767" in the input field.
  6. Click "Apply" to save the condition.
  7. Finally, click "Save" to apply the changes to your project.

Now, the custom CSS code will only be active on devices with a width greater than the specified maximum width, effectively disabling it on mobile devices.

This method allows you to selectively disable custom CSS code on specific device sizes while keeping it active on others. It provides you with greater control over the appearance and functionality of your website across different devices.