Maps layout does not look good on mobile device

[MEHLAW]

My Google Maps layout looks good on desktop but not on a mobile device.

[ruenel]

Hello Sam,

Thanks for writing in!

I have checked your site and I could not find the page that bears the same layout as your screenshot. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers.

[sasanp]

Sure. This is my staging site link http://r7g.8e5.myftpupload.com/

[nabeel]

HI Sasan,

Thank you for providing the URL. To make the map display better in mobile screens you can add the following code in the Theme Options > CSS:

@media screen and (max-width: 580px) {
  .x-map .x-map-inner {
    padding-bottom: 100%;
  }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!