0

Hello Guys,
i have a one html5 website, i had added google maps on my contact us page, while i checking that on mobile, the map (google map iframe) shows as a default width, is it possible to change the width regarding media query.

Edited by advent_geek

2
Contributors
2
Replies
13
Views
2 Years
Discussion Span
Last Post by advent_geek
0

Yup, you need a wrapper and some CSS magic.

Try something like this:

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

(jsFiddle demo)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.