Embedded Map Leaves Blank Space in Mobile Version

Hello All,

I have come across this issue on several forum posts here and elsewhere which have been solved with CSS, but none have worked with my site.

I have embedded an interactive map plugin on my 'Markets' page, but when i view it on my mobile phone there is a large blank space beneath the map (see below)

any help would be much appreciated. Thanks.

Happy to have a look at this for you. Can you share the URL and page that this is occurring on? Thanks!

Hi there, link is here:

https://tuba-beige-h5cr.squarespace.com/our-markets

Thanks

Very interesting, but I don't see the space underneath the map, it stretches to fill the space when I look at it.

Hi, yes it does on the squarespace mobile preview, and when you shrink the browser.

But not when you open it on an actual mobile however

It looks like you have a fixed height set on this element, highlighted yellow:

The fixed height 720px is also on the SVG element, can you adjust that in the embed?

At the moment, it is responsive - so you are able to see the map in mobile view.

I can control the height/width to fit within my screen nicely - but then it falls off the edge in mobile (see below, w: 1200px, h: 675px)

It seems to be an issue with the squarespace section where by it doesn't shrink below a certain height

I would suggest that the stretching is being done by the code rather than squarespace, you can see here that the FE grid is being stretched significantly:

Hi there,

I have fixed this by changing the block to a code block instead of an embed block. Not sure how i missed that one..

thanks for your help @Ziggy