search

VA-Polyamory / website

Static Website for VA Polyamory
0 stars 0 forks source link

Embedded Calendar not Responsive on Mobile #16

Closed castle-samj closed 5 days ago

castle-samj commented 2 weeks ago

The embedded Google Calendar is not made to be a responsive size, as it is an iFrame. This is particularly noticeable on Mobile, when width is a factor.

Here is the code in the Events page: https://github.com/VA-Polyamory/website/blob/a5be66c2754a2978c7f95456358608e88ea93637/docs/events.html#L144

Need to find a solution to ensure mobile users can see the calendar correctly.

castle-samj commented 2 weeks ago

I found a blog that seems to address this issue, worth trying. This shows how to add CSS to make the iFrame responsive (may be applicable to both desktop and mobile): https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/

castle-samj commented 2 weeks ago

Another potential option is to manually set the iFrame to a smaller size and remove some of the components (done through the Google Calendar Embedded creation tool). Due to fragmentation of devices and browsers, I'd rather leave this as a last resort.

castle-samj commented 1 week ago

Here is the modified embedded calendar for mobile (sized according to fragmentation most-common dimensions), removes some oversized elements (title, date, print, and calendar list), and starts on "Agenda" tab.

I still recommend wrapping the iFrame with a responsive style, as in previous comment

<iframe src="https://calendar.google.com/calendar/embed?height=400&wkst=1&ctz=America%2FNew_York&bgcolor=%23ffffff&showTitle=0&showDate=0&showPrint=0&showCalendars=0&mode=AGENDA&src=dmFwb2x5YW1vcnlAZ21haWwuY29t&color=%23F6BF26" style="border-width:0" width="360" height="400" frameborder="0" scrolling="no"></iframe>

castle-samj commented 5 days ago

changes made in PR #29 cover most of this issue