Change Embed Code only in Mobile

Hello,

I’m developing a website and I’m already in the final stages. I just needed to disable the embed code on the same page but on mobile. Whenever I delete or change the embed code on mobile it also changes on desktop.

Can anyone help me?

Thanks.


Here is my site Read-Only: https://preview.webflow.com/preview/bernardonunes?utm_medium=preview_link&utm_source=designer&utm_content=bernardonunes&preview=de7159118f83f9a600d87e31c76757cd&pageId=66671bcfc494a3de6261bc82&workflow=preview

hi @Bernardo_Nunes please follow forum request guide and provide more detail informations like what page what code if it is CSS, JS, iFrame … as no one most probably doesn’t have the crystal bowl.

Anyway, as this request is not WF specific answer to your question “how to detect that it is mobile browser” as they differ from standard desktop browsers or if screen width is eg. 300px" can be found on internet.

look for media queries, break points etc.

We also ran across this question with a client project and created a script that allows you to show or hide any desired element based on the device, OS or browser being used by the site visitor.

Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.

If there are any questions please feel free to tag me!

Happy Friday!

To disable the embed code on mobile without affecting the desktop version, you can use Webflow’s visibility settings. Select the embed code element, go to the Style panel, and for the mobile breakpoints (Tablet, Mobile Landscape, or Mobile Portrait), set the Display property to None. This will hide the embed code on mobile devices while keeping it visible on desktop. This approach allows you to control visibility without modifying the actual embed code, ensuring it only disappears on mobile screens.