Hi, I’m trying to embed a Google calendar using iframe. Please see www.tellasia.org/events. It looks fine on PC but on mobile the last column or two is cut off. Please help. I’ve done my best to implement what is found at this tutorial https://benmarshall.me/responsive-iframes/ and you’ll see the two calendars in the page right now (eventually I only want one, but trying two types of code to see what works) but nothing is working. Thank you for your help!!
Hi Leanna,
Thank you for writing in, both calendars on that page are actually responsive.
It’s the form on the footer that is being cut off.
You might need to edit that form on the GetResponse side because we can not apply a Custom CSS on that form.
Cheers!
The Getresponse widget looks fine on my phone, but the calendar doesn’t. I have cleared cache on both chrome and safari on my iphone and also a coworker viewed it on her phone and it is not showing up responsive for us, it’s cut off on the right. Plz see screenshots, also code below:
IN A RAW CONTENT ELEMENT:
`
CSS:
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Hi There,
It seems like the Google calendar’s width is based on the width of container and section. We have to remove the padding of section and max width the container.
To fix this issue, please add the my-section class to your section:
After that add this custom CSS:
@media (max-width: 767px){
body .my-section.x-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
body .my-section.x-section .x-container {
width: 100% !important;
}
}
Hope it helps 
I added it but it still looks the same. Cleared cache, restared phone too… no change. Code in there now is:
IN A RAW CONTENT ELEMENT:
`
CSS:
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@media (max-width: 767px){
body .my-section.x-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
body .my-section.x-section .x-container { width: 100% !important; } }
Hi There,
Sorry. I forgot to tell you that you should remove all your custom CSS from this page:
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Regards!
Ok I removed the code but now the cal is all scrunched up even in the pc.
IN RAW CONTENT
<iframe src="https://calendar.google.com/calendar/embed?src=tellasia.org_a8lhve6vrq6k9npk4bh0lddq48%40group.calendar.google.com&ctz=America%2FDenver" allowfullscreen style="border: 0" frameborder="0" scrolling="no"></iframe>
CSS:
@media (max-width: 767px){
body .my-section.x-section {
padding-left: 0 !important;
padding-right: 0 !important;
}
body .my-section.x-section .x-container { width: 100% !important; } }
Hi Leanna,
You don’t need that CSS, section and rows have options for that. Please inspect the section where the calendar is and set the padding to zero.
Then inspect the section row’s and toggle off the inner container so it would be 100% width.
Thanks!
ok so I removed the css and applied what you said ie removed padding from section and turned row container off, and that caused the calendar to be even more off, ie it is very thin vertically, but stretches all the ay out to the edges of the computer screen. Not good at all. At least with the css in there it looked good on PC.
Hi Leanna,
I see, then what you wish to achieve is specific size for calendar at least for mobile and it’s not related to responsiveness. Would you mind providing a mockup design of how you wanted it displayed? This isn’t theme or builder related, but I’ll try figuring out the final CSS based on your mockup design.
As far I see, the calendar is already responsive but maybe you’re looking for different dimensions
Thanks!
The weird thing is way back when we started this, you apparently got the calendar to be responsive, ie to fit nicely inside the frame when viewed in mobile. Since we removed all the css, though, it looks AWFUL in everything, - Actually I do not want it a specific size. I want it to be responsive. right now, it doesn’t even look good in the regular PC screen, let alone mobile. So we need to either go bak to the css we had before, or else put in some other css so it opens up and looks like a real calendar… And once we get that back in the PC view, then we can again see how to get it to work in Mbile. It looked like it was working for you but not for me so not sure wh?
Hi Leanna,
It’s already responsive, but I may need more information about which responsiveness you’re currently referring. Does it need to be fullscreen so it will be displayed as a big calendar? Or is it just responsive on width in which it will become full-width but shorter height? Or does it related to aspect ratio while being responsive? Which is why I recommend showing us a mockup of how it should be, the iframe itself is not part of the theme and has its own responsive breakpoints within the calendar so maybe we need exact information of how it should be responsive.
In that case, please set that CSS back again. Then I’ll check what’s really the issue on mobile with that CSS, though, I can’t promise any solution since the iframe itself isn’t part of the theme. Most of the video that uses embed code like iframe uses video elements which makes it responsive and the calendar is different.
Thanks!
The way it was displaying for you - see attached - is PERFECT. Meanwhile, the way it was also displaying in the PC BEFORE we removed the CSS - nice and big and open like one would expect a calendar, not all scrunched up - is how it should show on PC. It’s simple: We simply need to see the whole calendar, looking like a claendar, on both mobile and PC with no columns cut off. Currently on any mobile I view it on, the right columns are cut off. 
Hello Leanna,
Please turn ON again the inner container option in your row settings so that on smaller screens you will have some space on the left and right of the calendar. Having it this way, it is more like a calendar with the spaces around it. The only drawback is that the calendar will display narrower. Please understand that we can only control the containers such as the row, column width or the iframe width. The contents of the iframe which is the calendar it is beyond anyone’s control because the calendar and it’s layout were served by Google along with it’s styling.
Hope this make sense.
Ok I turned the container on and replaced the css the way it was at the beginning of this thread. For you it appeared to be properly formatted (it looked like a calndar, not all scrunched up small) and also responsive (full width of cal was visible, not cut off on the end) as two screenshots you sent it was responsive. Can I know what phone and what browser you were using? Please check it now again and send me a screenshot. I can’t figure out why it’s responsive for you but not for me.
Hi Leanna,
I checked in an actual mobile phone and can see that it is a bit cut off
Please try remove the div iframe-container of your iframe and the css that you have added.
Then just add the iframe code in a raw element, as it is
<iframe src="https://calendar.google.com/calendar/embed?src=tellasia.org_a8lhve6vrq6k9npk4bh0lddq48%40group.calendar.google.com&ctz=America%2FDenver" allowfullscreen style="border: 0" frameborder="0" scrolling="no"></iframe>
If it still doesn’t work, please provide us your wordpress admin login in Secure Note
Thanks
Yes I had already tried that suggestion (removing CSS and the DIV) which results in the calendar being all scrunched up even in the PC view. I have kept the CSS and Div in for now since this is a live page Plz see login info in sceure note as also given at the beginning of the thread: *** I truly appreciate your patience in helping solve this, thank you! ***
Hi Leanna,
I still really don’t get it, clipping will really occur on the calendar for that size (56% aspect ratio). That’s why I wondered what design should we really expect to see on mobile. But based on your last screenshot, it appears to have shorter height, so I assume you wish to make it taller? If yes, you can then add this CSS
@media ( max-width: 767px ) {
.iframe-container {
padding-bottom: 100%;
}
}
Still, clipping will occur on those calendar tabs and it can’t be fixed.
Thanks!
Right, it isn’t acceptable to have the calendar clipped off on mobile view. I added the code but no change. So the only alternative is to get some kind of calendar plugin?
Hey @Leanna,
Trying a calendar plugin might be a better choice. But, the bottom line here is, our the theme and the builders’ output are responsive out of the box but that does not cover the content if the content has responsive limitations like in the case of the calendar. With that said, the user must ensure that the content is responsive also.
If it worked before with our help, it does not mean that we will continually make it work as fixing custom code issues is not covered by our product support. Custom codes in this forum are only to provide some guidance. They’re not to be treated as part of our products therefore we could not guarantee compatibility.
Thank you for understanding.