How can I hide the Coda badges displayed when an iframe loads from `<a class="lightbox"` using Webflow?
TL;DR
- Inspect the Coda iframe to find classes or IDs for the badges.
- Add custom CSS in Webflow's Project Settings to hide these elements with
display: none;. - Publish the site and test across devices to ensure the badges are hidden.
If you want to hide the Coda badges that appear when loading an iframe within a lightbox in Webflow, you'll typically need to address this via CSS or JavaScript, considering Webflow's designer limitations. Here's how you can do it:
1. Identify the Badges
- Inspect the Coda iframe with the browser's developer tools.
- Locate the specific classes or IDs linked to the badge elements.
2. Add Custom CSS in Webflow
- Go to Project Settings and select the Custom Code tab.
- Under the Head Code section, insert CSS to hide the badge. You can use:
display: none;for the specific classes or IDs found earlier.
Example for illustration (replace .badge-class with actual class or ID):
.badge-class {
display: none;
}
3. Ensure CSS is Loaded
- Publish your site to ensure that the new CSS is applied.
- Check the live site to confirm the badges are hidden.
4. Test on Different Devices
- Open your site on various devices and browsers to confirm that the badges are hidden persistently.
Summary
To hide Coda badges in a Webflow lightbox iframe, you'll need to use custom CSS by targeting the specific elements that make up the badges. This involves identifying the right classes/IDs using browser tools and applying CSS rules within Webflow's custom code settings.
