Make JUST the Map Block full-screen

Site URL: https://transform.squarespace.com

I've tried adding the following code to my CSS, but that doesn't seem to work:

html, body {
    overflow-x: hidden;
}

To be clear, I just want the MAP block to be full-screen, nothing else. Is there a way to make this happen?

Here's my staging site URL and PW:

https://transform.squarespace.com/ pw - transform

Thanks in advance,

Hello there,

If I'm understanding you correctly, we can apply a quick fix for this. You can use the code below to increase the dimensions of the map and reposition the block so that it fills screen. 

#block-yui_3_17_2_1_1618948765290_6570 .page-map {
    height: 100vh;
    width: 200%;
    position: absolute;
    left: -50%;
}

Hope that this helps!

Thanks so much, @Wolfsilon! Now how do I remove the white margin/padding below the map so that it buts up nicely against the footer?

Thanks again,

On 5/11/2021 at 3:07 AM, Romeo said:

Site URL: https://transform.squarespace.com

I've tried adding the following code to my CSS, but that doesn't seem to work:

html, body {
    overflow-x: hidden;
}

To be clear, I just want the MAP block to be full-screen, nothing else. Is there a way to make this happen?

Here's my staging site URL and PW:

https://transform.squarespace.com/ pw - transform

Thanks in advance,

Add to Design > Custom CSS

/* white space between map - footer */
[data-section-id="607f32c0e80abb69e7ca1a0c"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#block-yui_3_17_2_1_1618948765290_6570 {
    padding-bottom: 0 !important;
}

That did it, @tuanphan! Thanks so much 🙂