Embedded Google Calendar Not Displaying Correctly on Mobile Devices

  • I have embedded my Google Calendar on my website – allsaintsmke.org (it’s at the bottom of the home page). It displays fine on the website, but when I view on my iPhone, the calendar date squares are condensed down so you can’t see the data in them. Does anyone have a fix?

    Thank you for your time.

Viewing 1 replies (of 1 total)
  • Anonymous User 907751

    (@anonymized-907751)

    Hey Jules, try this code:

    <div class="gcal-container">
	<iframe src="https://calendar.google.com/calendar/embed?src=julie.allsaintsmke%40gmail.com&ctz=America/Chicago" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
    <style>
.gcal-container {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}

.gcal-container iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
</style>
Viewing 1 replies (of 1 total)
  • The topic ‘Embedded Google Calendar Not Displaying Correctly on Mobile Devices’ is closed to new replies.

Tags