Iframe imbedding

[onlyonce]

How do I imbed this iframe in a way it’s going to be sized responsively?

URL Climate Clock Updated (amorhumanity.com)

Here is the original,

Climate Clock | Human Impact Lab

I would be fine if it filled the entire page like the original. Right now, I end up with it small enough a scroll bar appears. Ideally that scroll bar would never be seen, like in the original feed.
<style>.climate-clock{position:relative;padding-bottom:120%;height:0;overflow:hidden;max-width:100%;}.climateclock iframe{position:absolute;top:0;left:0;width:100%;height:100%;}@media(min-width:700px){.climateclock{padding-bottom:56.25%;}}</style><div class='climate-clock'><iframe src='//embed.climateclock.net? buttons=1&audio=0' style='border:0'></iframe></div>

[ruenel]

Hello @OnlyOnce,

Thanks for writing in!

Please edit your page and change the page template first to “Blank - No Container | No Header, No Footer”. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

And then, you also need to enable the Flexbox option in your Column element settings. You will need to position the contents of the column to the center both vertically and horizontally.

Hope this makes sense.

[onlyonce]

@ruenel This made sense, however this is what happens. How do I get it to be maximized.

However this is what I’m hoping to have

[ruenel]

Hello @OnlyOnce,

It seems that you may need to edit the custom CSS in your iframe embed code. From this:

.climate-clock{position:relative;padding-bottom:120%;height:0;overflow:hidden;max-width:100%;}

.climateclock iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

Into this:

.climate-clock{position:relative;height:auto;min-height: 100vh;overflow:hidden;max-width:100%;min-width: 100vw;}

.climate-clock iframe{ position:absolute;top:0;left:0;width:100%;height:100%; min-height: 100vh;}

Please note that the code provided above serves as a guide only and is to help you in pointing out the incorrect code and also in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[onlyonce]

That worked, thank you.

[prakash_s]

Hello @onlyonce,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks