Member Avatar for advent_geek

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
  • 602 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by advent_geek
Member Avatar for mattster

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)

Member Avatar for advent_geek

@mattster thanks man. works fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.