Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I was looking for a quick and easy method for embedding a google map (via their embed code) into a responsive site and apply the responsiveness to the map as well.
Generally the iframe will refuse to resize with your media queries or with the div its contained within which always frustrated me, and I hate to use plugins if there really not needed such as responsive google map plugins. See my solution below.
If your just using the google maps (or any other embed such as youtube, soundcloud etc.) IFRAME embed you can make it responsive by simply adding this to your CSS.
If your container/theme is responsive this will work great. Essentially this will work with ANY iframe and not just limited to google maps. But keep in mind if you have other iframes on your site they will as well become responsive.