Jump to content

Make JUST the Map Block full-screen

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment
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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.