www.wysiwygwebbuilder.com

Posted: **Thu Feb 11, 2021 4:47 am**

Hi all,
I'm trying to insert a google calendar into an HTML object and make it responsive and I'm not having any luck. The calendar is inserted correctly but not responsive.

HTML properties: Use <div> to set position and size of the HTML | Overflow default.

The code is:

Code: Select all

<style>

/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>


<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=Australia%2FSydney&amp;src=ZTcxMjJmN3NyNjFjdGlkbzVyaGgxMzV0dWdAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=ZW4uYXVzdHJhbGlhbiNob2xpZGF5QGdyb3VwLnYuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23795548&amp;color=%23009688&amp;showTabs=0&amp;showPrint=0" style="border:solid 1px #777" width="800" height="400" frameborder="0" scrolling="no"></iframe>
</div>

If I don't insert the code into an HTML Object and just insert it into the body of a blank page the calendar is responsive.

Any help on what I might be doing wrong would be appreciated.

TIA

Posted: **Thu Feb 11, 2021 7:10 am**

By 'responsive', do you mean 'flexible'?
An HTML object is flexible if you place it inside a layout grid and set the full width property to 'true'

Posted: **Thu Feb 11, 2021 7:25 am**

Pablo wrote: ↑Thu Feb 11, 2021 7:10 am By 'responsive', do you mean 'flexible'?

By responsive I mean change size as the resolution changes. If you could point me in the right direction it would be appreciated.

Posted: **Thu Feb 11, 2021 7:51 am**

The HTML object is responsive. So, it can have a different size in breakpoints.
Also as mentioned, it can be flexible in layout grids.

Posted: **Thu Feb 11, 2021 8:03 am**

Sorry @Pablo so just to be sure.

Are you saying the HTML will not automatically change size and I have to set up break points and change it's size that way.

If you do mean this, it's strange that the same code automatically changes size with resolution changes if not placed in an HTML object.

Thanks.

Posted: **Thu Feb 11, 2021 8:15 am**

Are you saying the HTML will not automatically change size and I have to set up break points and change it's size that way.

No, that is not what I was saying.

If you do mean this, it's strange that the same code automatically changes size with resolution changes if not placed in an HTML object.

If you place the code inside an HTML object then it will be restricted to the div of that object

By default, an HTML object has a fixed size. This size can be different in breakpoints.
If the HTML object is part of a layout grid then it will be flexible, which means that it automatically adapts to the size of the screen.

Posted: **Thu Feb 11, 2021 8:25 am**

If the HTML object is part of a layout grid then it will be flexible, which means that it automatically adapts to the size of the screen.

Well, this is not what is happening as I have the HTML object inside a layout grid and it is just stuck at the same size no matter what the resolution.

Is there anything I could have done wrong?

Sorry to be a pain, just looking for answers.

Posted: **Thu Feb 11, 2021 8:31 am**

Here's the wbs.

https://drive.google.com/file/d/1YTszTV ... sp=sharing

Posted: **Thu Feb 11, 2021 8:39 am**

You did not set the full width property of the HTML object to 'true'.

Posted: **Thu Feb 11, 2021 8:50 am**

Fantastic!!!

Thank you very much.

Greg

Posted: **Thu Feb 11, 2021 11:56 pm**

Well all went great until I added a breakpoint and then the calendar would not auto size like it did without the breakpoint.

See example below:

https://drive.google.com/file/d/18SpL1v ... sp=sharing

Is there a way of fixing this?

TIA

Posted: **Fri Feb 12, 2021 12:13 am**

There are 2 things you need to do:

1. Open up the html box and set the Type to: Do not use <div>
2. On line 26 of the code, locate the iframe code and using the slider, slide to the right until you find the following:

Code: Select all

width="800"

and change it to:

Code: Select all

width="100%"

Posted: **Fri Feb 12, 2021 12:28 am**

That worked, thank you very much.

Greg

www.wysiwygwebbuilder.com

Help with google calendar

Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar

Re: Help with google calendar