Sections / Divs and IFrames - how to get spacing right?

I’m trying to embed a Constant Contact Calendar into my page using an Iframe. I can’t figure out how to get the size right that the calendar appears to be ‘part’ of my page rather than this weird box.

It seems that I have to do something with putting it in a Div - and set the values in the div - but the only thing I can get to work is to increase the padding. I want it to just fill the space automatically. Can someone please help?

Here’s the link to my site: https://preview.webflow.com/preview/firsthandtraining?preview=ffcd5cf1daac4809df0748a647523bf9

Here’s the link the my current page: http://www.fhtraining.net/calendar
To the Constant Contact Calendar: Constant Contact Events

Here’s the Iframe code that I copied from another forum post.

<style>
.iframe-holder {

width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.iframe-holder iframe {
  height: 100vh;
  width: 100%;
}
</style>

<div class="iframe-holder"><iframe src="http://events.r20.constantcontact.com/calendar/monthview?eso=001CskKD3FwQenhmOKRGTg0Cw%3D%3D&llr=hrjlhtuab" seamless frameborder="0"></iframe></div>

Hello @Sandy.
Could you fix your post, pls. For share part of code wrap code into preformatted text, other way it will never appear here :wink:

Thanks so much Sabanna. Clearly I’m new. :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.