Map block behaviour on mobile - extends beyond the block

Site URL: https://begonia-beige-w8gf.squarespace.com

I have been knocking my head against this problem for a while now and all of the other recommendations and code snippets I have found in the forums don't seem to solve my issue. 

I am using the advanced map block and when I set the size of the block on desktop, moving across to mobile seems to maintain the height from the desktop. Any adjustments to the height of the block on mobile has no impact on the map.

This behaviour is even evident in edit mode where we can see the map extending beyond the bounds of the block.

So first question, how can I control the height of the map on mobile if not with the block height itself?

Second question, is there anything we can do to ensure when the map size is adjusted for mobile the "fit bounds" setting is maintained ensuring all pins remain visible in the new reduced size viewport on mobile?

Any help would be greatly appreciated.

11 minutes ago, Todaybreak said:

Site URL: https://begonia-beige-w8gf.squarespace.com

What's your site wide password?

Password = 99problems

I can't replicate the problem, but you could try hiding the overflow with CSS:

section[data-section-id="674565cb7ae2d20164cbe28a"] {
  overflow: hidden;
}

Here you can see the desktop and then the mobile with the map block selected. See how the map extends beyond the block size? And it is this larger extended size that is displayed in browser, not the reduced height block as I want it.

Your solution simply hides the map that is extending beyond the section but does not resize the map. So we are losing valuable information. We need to be able to specify a height of the map itself so we don't lose content in the overflow.

I do appreciate the assistance however, I just think we are targeting the wrong issue. I would like to be able to specify the height of the map, not simply clip the content. This is evident in the loss of the google logo and northern states of America in the map.

2 minutes ago, Todaybreak said:

I do appreciate the assistance however, I just think we are targeting the wrong issue.

Agreed, as I said I couldn't identify the issue when I looked, so I took a punt.

So is there a way for us to specify the height of the map in mobile view as it seems to persist the same height from desktop?

I assume we need to specify the height of the iframe if that is what the block uses?

You're using the Square Websites plugin, correct?

Correct, the advanced map block.

Strange, it should resize automatically.

Have you tried asking in their dedicated Slack support channel?

This code is causing the problem:

Having a min-height set in CSS is stopping you from being able to resize the map natively.

Ah that would make sense from my unskilled perspective. Is this code accessible for me to edit directly and remove the min height limitation?

And their slack support is no longer accessible unfortunately.

3 minutes ago, Todaybreak said:

Is this code accessible for me to edit directly and remove the min height limitation?

I would guess this was in your Custom CSS, I don't think it's a standard feature in the plugin.

No I have not added that, the css I have added is super minimal. Only a couple of overlays and some text styling. How would I determine its source then. 

Or can I override it?

Sir you are a genius. That worked perfectly. Thank you very much for both your time and skills mate.

1 minute ago, Todaybreak said:

Sir you are a genius. That worked perfectly. Thank you very much for both your time and skills mate.

Happy to help! Can you mark my post as the solution and give it a like? Thanks!

Done and done.