Iframe not responsive on mobile

Support
#4

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 :slight_smile:

#5

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; } }

#6

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!

#7

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; } }

#8

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!

#9

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.

#10

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 :slight_smile:

Thanks!

#11

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?

#12

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!

#13

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.

#14

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.

#15

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.

#16

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

#17

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! ***

#18

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!

#19

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?

#20

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.

#21

hi Christian, it actually didn’t ever work in mobile. I thought all Iframes were responsive but apparently this isn’t the case for this Google Calendar iframe. You guys sure tried hard to make it work and I appreciate your help. It seems I’ll have to try to find an affordable plugin to do it.

#22

Hi Leanna,

Actually the <ifrane> can be responsive, but if its the <ifrane>'s content is not responsive specifically if its outside of your domain then we can not really apply a styling on it.

It could also an issue specific to iPhone, I’ve checked your page again on an actual phone (Android) and the calendar is not cut off, it actually look better now than before because the calendar has more room.

Yes, better to use a calendar plugin, have you seen the Modern Event Calendar extension? does that fits what you need?

Thanks,

#23

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