Embedded Google Map Not Resposive :-(

[Nightwing]

Good nearly afternoon from 11° where did the Sun go York UK,

On this page:
http://cluster7.website-staging.uk/english-teacher-david.co.uk/
I am trying to embed a Google map but it refuses to be responsive despite my most valiant attemps

Here is the offending CSS:

/* Google Map iFrame Start */

.map-responsive { 
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* Google Map iFrame Ends*/

And here is the offending HTML

      <div class="map-responsive"> 
      <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q=BSC%20&key=AIzaSyBcvARBmSAMLer3osLlP9awnA6NWGUPiyk" allowfullscreen></iframe>
      </div>
          <div class="rd-google-map">

Originally I was trying to avoid an iframe solution but no success (I am building from a template so you may see legacy bits of code for the map which are redundant ). The iframe map appeares but i just need it to fill / be responsive as the completed website template shows here in the footer:

Demo for Private Teacher Responsive Website Template #58042

Any ideas how to make this iframe responsive would be great

[m_hutley]

How are we defining ‘responsive’?

Your page loads the map fine for me, showing a full sized map of an area in Alabama; not sure what that location has to do with a UK website, but there we go.

[TechnoBear]

@m_hutley

Your page loads the map fine for me

Same here, except it shows an area of the UK.

[m_hutley]

Interesting. It looks, from the iframe SRC, that the query used was "BSC " (yes with a trailing space). For people in the southern US, this query according to Google’s algorithm obviously hits Birmingham Southern College before whatever location the designer is trying to find. Might be worth refining your query there Nightwing…

[Nightwing]

HI, yes i get the map showing perfectly on a chromebook but it does not fill the width of my screen, i’d like it to fill the width of my screen please.

[m_hutley]

It fills my screen… not sure why it wouldnt fit yours… unless your browser is letting the attributes of the iframe override the CSS, instead of the other way around…try stripping out the width and height on the iframe tag and see what happens.

[Nightwing]

Thank you for looking into this, i have been trying to post a screen shot but the connection has really gone slow but basically that google map on my home page leaves a tonne of whitespace left and right of the map, no problem on an iPhone but a bigger viewport i get whitespace issues

[m_hutley]

I’m viewing it on a 1920x1080 monitor and it looks fine for me, and the CSS inspector in my browser is telling me it’s rendering the map iframe as 100% x 100%:

Does your CSS inspector tell you otherwise?

EDIT: let me clip that down a bit, dont need most of the bottom bit…

[Nightwing]

Taking a look now

[Nightwing]

Nope its stuck at 600 x 450px but thank you for taking time to look at this but the map remains un responsive on my chromebook

[m_hutley]

See post #6. Your browser is doing the thing I described.

[Nightwing]

I think you are onto something! I just tested the site on another chromebook and the map works as i want Yipee!!! Now let me see if i can figure out what you’ve spotted

[Nightwing]

Wow this is becoming a saga So I zeroed the width & iFrane and now no map! But on another chromebook (which I did not build the site on) no problem!!
I am ok to add zero values in the width and height?

[m_hutley]

I do have a secondary theory. If you’ve been playing around with style.css a lot, it’s possible your chromebook is caching style.css and has an old version of it where you didnt change the map sizes. point your chromebook at http://cluster7.website-staging.uk/english-teacher-david.co.uk/css/style.css, hold shift, press F5, and then reload the main page on your chromebook.

[Nightwing]

Your theory was correct!!! Just cleared the cache and boom! The map works, GRAZIE DIO!!!.. Thank you for persevering with this, yes i I have been tweeking a lot of CSS so i guess it was still linking legacy code, any hows thank you for fixing this