Hello Form

Anybody have luck with embedding Google Calendar? Shows up fine but not responsive>

Thanks in advance

Byron

Hey Forum

Can't believe it but got it - I think, heres how I did it. Would like to know if there is a better/more stable etc way to do it

Used the CC instructions for map and modified.

Surrounded wth iframe of calendar with

<div class="cc-calendar-wrapper">
</div>

head section add
<link rel="stylesheet" href="css/custom.css" type="text/css">


Then added this to custom css

.cc-calendar-wrapper {
position: relative;
padding-bottom: 75%; /* 16:9 */

height: 0;
overflow: hidden;
}
.cc-calendar-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Seems to work.

Thanks

Byron

Looks correct to me. Thanks for sharing. Others will probably be looking for this.

This will work for almost all iframes. You just need to edit the class name to match what you are making responsive, or if you have more than one on a site, just make it generic and no need for two classes.