Map off kilter in mobile

Hi there,

Absolutely. Can you provide a link to your map so I can take a look?

Also, what did you enter into the “width” setting in your map? If it’s in pixels then it won’t be able to be responsive for mobile devices. If instead you put 100% then it’ll respond to the container width.

Let me know on those two items.

Thanks!

Hi Matt,

Thanks for your reply. Yes, the width is 100%.

I took off the construction mode temporarily. The Map is here: https://bergx.designs4thenet.com/headquarter-sales

Also, I looked at it again in various mobile widths (refreshing each time), and noticed that Montreal is top center for all breakpoints. So maybe the map is top-centering instead of center-centering?

Yes, it might just be a matter of picking your lat/long for the map more strategically and perhaps also your Zoom level.

Can you also confirm what your Map settings are for the controls? Maybe a screenshot of the controls section?

Hi Matt,

Sure, the screenshots of the controls are on this page: https://bergx.designs4thenet.com/map-settings

Thanks!

I see what’s going on… your theme or page builder wrapped our map in a unique div which is cutting the height of the map. Here’s how you can avoid that:

.x-map .x-map-inner {
    height: auto;
}

Add that to your theme’s styles.css or into the Customizer’s “Custom CSS” section and you should be good to go.

Thanks!

Thanks! that worked. I also added padding: 0; to take care of the white box.

Thanks again!!

Not a problem!

If you’re enjoying Maps Builder and appreciate our support, we’d love a kind review from you here:
https://www.ads-software.com/support/plugin/google-maps-builder/reviews/

Thanks!