Can the custom code embed be disabled for mobile in Webflow?

Published on
September 22, 2023

Yes, the custom code embed can be disabled for mobile in Webflow. This can be done by using Webflow's built-in features and settings. Here's how you can disable the custom code embed specifically for mobile:

  1. Open your Webflow project in the Designer.
  2. Navigate to the page where you want to disable the custom code embed for mobile.
  3. On the left-hand side panel, click on the "Settings" tab.
  4. In the Settings tab, locate the "Custom Code" section.
  5. Under the "Head Code" or "Body Code" section, you'll find the custom code embed.
  6. To disable it for mobile, wrap the custom code embed within a conditional statement using Webflow's responsive classes.
  • For example, if you want to disable the custom code embed for screens smaller than 992px, wrap the code with the following class: w-hidden-main.
  1. Save your changes and publish the site.

By wrapping the custom code embed within a conditional statement, you can control its visibility based on the screen size. In this case, by using the w-hidden-main class, the custom code embed will only be hidden on screens smaller than 992px, which corresponds to most mobile devices.

To summarize, here are the steps again to disable the custom code embed for mobile in Webflow:

  1. Open your Webflow project in the Designer.
  2. Go to the page where you want to disable the custom code embed.
  3. In the Settings tab, find the custom code embed in the Head Code or Body Code section.
  4. Wrap the custom code embed within a conditional statement using Webflow's responsive classes, like w-hidden-main.
  5. Save your changes and publish the site.

Additional Questions:

  1. How do I enable the custom code embed for mobile in Webflow?
  2. Is it possible to disable custom code embed for specific breakpoints in Webflow?
  3. Can I add different custom code embeds for different screen sizes in Webflow?