Embed HTML FAQ

This article showcases tips that will help you fix your common problems when dealing with this format.

To make the embed HTML responsive within your iframe, you'll need to apply CSS. Here’s how to adjust the existing code:

Access the HTML Embed Element:

In the Editor, add an HTML iframe element to your page where you want to embed the content.

Edit the HTML Code:

Click on the HTML iframe element and edit the source of the HTML.

Replace the existing code with the following structure:

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<div class="responsive-icon-container">
  <lord-icon
    src="https://cdn.lordicon.com/rmkpgtpt.json"
    trigger="hover"
    style="width:100%;height:100%;">
  </lord-icon>
</div>

Add CSS for Responsiveness:

To make the HTML responsive, add the following CSS within a < style > tag:

<style>
  .responsive-icon-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* This creates a 1:1 aspect ratio. Adjust as necessary. */
  }

  .responsive-icon-container lord-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Save and Publish:

Save the changes and publish your site to see the responsive icon in action.

.responsive-icon-container: This div acts as a container for your < lord-icon >. It maintains a responsive aspect ratio using the padding-top property (100% for 1:1 ratio, but you can adjust this to fit your needs).
< lord-icon >: The icon inside the container is absolutely positioned to fill the container, ensuring it scales proportionally with the container.

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<div class="responsive-icon-container">
  <lord-icon
    src="https://cdn.lordicon.com/rmkpgtpt.json"
    trigger="hover"
    style="width:100%;height:100%;">
  </lord-icon>
</div>
<style>
  .responsive-icon-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Adjust this for a different aspect ratio */
  }

  .responsive-icon-container lord-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

By following these steps, your < lord-icon > will be responsive, adjusting its size based on the window size or the containing element’s size on your site.

Was this article helpful?

How to make Embed HTML iFrame responsive?

Explanation