Google Maps not mobile friendly / swipe problem

The contact page with Google Maps is awesome on a desktop (and a mouse) but on a tablet or any mobile it is difficult scroll below the map because touching the map, activates controls that makes the map scroll but not the page itself.
In my view the map should not be full sized so there is space at each side to scroll / swipe to below text.
What ccs or html code is needed to accomplish that?
Have a look at: http://www.wind-rose.co.za/contact
Thanks in advance!

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:1020px) {
.gk-map-contact.header {
    margin: 0 auto;
    width: 80%;
}
}


Thanks and I have applied this however I do not see any difference. See attached pictures.

Hi

I can see it working, but as the code says it's for screens smaller than 1020px, You may try to rice this value for bigger screens as I can see You are testing it for 1024px.

My mistake. Works perfect. Issue solved!

Hi


Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro