Google Calendar - Post ID 248806
Hello Form
Anybody have luck with embedding Google Calendar? Shows up fine but not responsive>
Thanks in advance
Byron
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
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.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Byron Tipping wrote:
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
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
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.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.