Space under calendar?

User 2818159 Photo


Registered User
57 posts

Just started a new site for a friend, and I have a problem with the embedded Google Calendar. For the largest screen sizes there is a TON of white space under the calendar, but it's fine for smaller screens. How do I fix this?

Here's a testing/practice link: http://villageworkroom.coffeecup.com/calendar.html

BTW, V5 is working very well :)
User 2699991 Photo


Registered User
3,706 posts
Online Now

Joe P. wrote:
Just started a new site for a friend, and I have a problem with the embedded Google Calendar. For the largest screen sizes there is a TON of white space under the calendar, but it's fine for smaller screens. How do I fix this?

Here's a testing/practice link: http://villageworkroom.coffeecup.com/calendar.html

BTW, V5 is working very well :)


Doesn't seem to be any space below the calendar from here on both laptop & large monitor.
Except for a lot of scrolling to reach the bottom of the calendar, but then that's to be expected

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,733 posts
Online Now

Depending on which browser you are viewing it with, you either have the 'ton of space', or the calendar is stretched out heightwise to cover the space. In Firefox and Chrome, the calendar is stretched, in Edge, IE11, and Opera you have white space below it.
I see that the calendar appears in an iframe and has been given a height of 600px. Can you do anything with that height, or any other properties? I would need to see the project file to be able to help.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
13,733 posts
Online Now

Addendum...

I tried to embed a Google calendar myself, following the steps given here: https://support.google.com/calendar/answer/41207?hl=en
I used the approach described under 'Embed a calendar...' It was a straightforward thing, some browsers displayed a small space of say 50px under the calendar, see attached. I did not do any customisation at all.
Attachments:
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2818159 Photo


Registered User
57 posts

I get the large white space with FF and Chrome on a regular monitor.

I attached the project file.
Attachments:
User 122279 Photo


Senior Advisor
13,733 posts
Online Now

I'm sorry, but I have given up on this. When I got your project, I added a blank page and moved your HTML element to that page, but it had exactly the same errors. Then I wiped that page clean, saved it, and then popped an HTML element in with the code for my own calendar, the one I had tried earlier today, and it came out ok! I don't know what we are doing differently.

Hopefully, someone else can help.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2818159 Photo


Registered User
57 posts

Yeah, something is buggy. Does anyone have a recommendation for a calendar to embed that will work better?
User 2818159 Photo


Registered User
57 posts

FWIW, I found a work-around by using the standard non-responsive version for large screens (which eliminated the large bottom white area) and used a separate responsive version for small screens since that was working fine.
User 2699991 Photo


Registered User
3,706 posts
Online Now

Joe P. wrote:
FWIW, I found a work-around by using the standard non-responsive version for large screens (which eliminated the large bottom white area) and used a separate responsive version for small screens since that was working fine.


there is another way
There is a demo-video on the way to youtube, will let you know when its up


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

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.