How to make your Reseller iFrame responsive
Last Updated: August 27, 2024
When your Reseller iFrame is created your copy and paste code has dynamic dimensions to fit a minimum and maximum height and width size. You can adjust the height and width to make your iFrame fit into your website better, or you can used fixed height and width, or you can make your iFrame fully responsive.
What is Responsive Design?
Responsive design is an approach to web design that ensures websites look and function well on a variety of devices and screen sizes. It involves using flexible layouts, images, and CSS media queries to adapt the website's content and design to the user's device. The goal is to provide an optimal viewing and interaction experience, whether the user is on a desktop computer, tablet, or smartphone. Key techniques include fluid grids, flexible images, and media queries to apply different styles based on the screen size and orientation.
How do I make my iFrame responsive?
When you first join the iFrame Reseller Program, you will receive a block of code that you can copy and paste onto your website. The iFrame code will have a `min-width` and `max-width` as well as a `min-height` and `max-height`. These dimensions will allow your iFrame to adapt to fit the viewport size that is most appropriate for the device being used.
If you want to make the iFrame fully responsive, you will need to update your iFrame code to remove the existing widths and place the iFrame code block inside a container block that has some extra CSS styles on it.
On the iFrame container block you'll add the following styles:
style="padding-bottom:56.25%; position:relative; display:block; width: 100%"
on the iFrame you'll add the following styles:
width="100%" height="100%" style="position:absolute; top:0; left: 0"
Responsive iFrame Code
<div class="iframe-wrapper" style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe width="100%" height="100%" style="position:absolute; top:0; left: 0" src="...">...</iframe>
</div>
Note: Use caution when modifying your iFrame code as any unintended changes could break your iFrame installation.
