One of the trickiest things about responsive design is the lack of support given to users of services like Google Maps and Google Calendars. Most embed codes for these services specify a fixed width with is not terribly helpful.
Well there is a really simple fix which Niklaus Gerber highlights on his blog. Niklaus shows the issue solved for Google Maps and Bing Maps but it also does the trick for Google Calendars too.
Just add the following CSS to your WordPress site somewhere:
/* 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%;
height: 100%;
}
And then wrap your Google Map or Google Calendar iframe in a div like this:
<!-- Responsive iFrame -->
<div class="responsive-iframe-container">
<... iframe code >
</div>
And in case you are wondering this doesn’t solve the same problem with all those awful facebook widgets. Facebook too assumes we live in a fixed width world!
Thank you for featuring my article.
I tried this out but it did not work for me and I’m not sure why. I added it css and the php but it won’t resize to the screen.
Can anyone help me and point me in the right direction.
Thank you so much, you’ve saved me a job! This also works perfectly with Google spreadsheet iframes on responsive websites.
Excellent.
Thank you very much for posting this.
By way of returning the favour, if whenm embedding Google Maps you want to remove the annoying speech bubble which gets cut in half in maps that aren’t very tall, but you want to keep the red pin, follow these instructions:
1. Locate yours positon on Google Maps, and download your iframe code from Google using the link button to get the code. When you’ve done that you need to identify whether or not it includes the ‘iwloc’ code, which will look something like this, sandwiched between two ampersand codes:
&iwloc=A&
If your code does include this, ALL you have to do, is simply remove the uppercase A like so:
&iwloc=&
Bingo! You’re done.
If the above code is missing from iframe code, then you’ll need to add it in, exactly how it displays above.
That’s it. Simple huh.
Have fun.
Andy
Thanks Andy.
This rocks! but on iphone the right side of the calendar over extends the width of the phone. anyone know a fix for that?
I found this: http://dmd.mo.gov/blog/lstrange/google-calendar-iframe-embed-issue-ipad-and-iphone5-and-how-fix-it and it works. Also I found that the calendar responds differently if you forego the above and just change the width to 100% in the original iframe code – also is responsive. make sure to keep the height in pixels.
Really fab. Thanks a bunch. Saved me TONS of time! Will keep testing but seems to work fine so far!