Making a full width map code block?

Site URL: https://bulldog-circle-xzyr.squarespace.com/locations

I'm trying to make the map on this particular page to be full width and no padding.

I've seen several people and websites provide code on how to do it but I can't get it to work. I know it's something to do with CSS.

Any tips?

Hi @crosswalkcc
Use this code in your Design -> Custom CSS

canvas.mapboxgl-canvas {
    width: 100% !important;
}

section[data-section-id="5f44154e96577b1e7477b32f"] .content-wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

Let me know if it works.
Best,
Leopold

16 hours ago, IXStudio said:

Hi @crosswalkcc
Use this code in your Design -> Custom CSS

canvas.mapboxgl-canvas {
    width: 100% !important;
}

section[data-section-id="5f44154e96577b1e7477b32f"] .content-wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

Let me know if it works.
Best,
Leopold

It worked perfectly. I added padding to the top and bottom as well and was able to disable scroll to zoom so you can navigate the site more easily. Huzzah! Thank you so much!

17 hours ago, IXStudio said:

Hi @crosswalkcc
Use this code in your Design -> Custom CSS

canvas.mapboxgl-canvas {
    width: 100% !important;
}

section[data-section-id="5f44154e96577b1e7477b32f"] .content-wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

Let me know if it works.
Best,
Leopold

Sorry to follow-up, but is there any way to make it full width on mobile as well?

You are welcome!
Use this code to fix right padding of screen on mobile.

@media screen and (max-width:768px){
div#page-section-5f44154e96577b1e7477b32f .col.sqs-col-9.span-9 .sqs-block-code {
    padding-right: 0 !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

On 8/26/2020 at 6:12 PM, IXStudio said:

You are welcome!
Use this code to fix right padding of screen on mobile.

@media screen and (max-width:768px){
div#page-section-5f44154e96577b1e7477b32f .col.sqs-col-9.span-9 .sqs-block-code {
    padding-right: 0 !important;
}
}

Please use the like button if it helps you!

Best,
Leopold

Hi,

I can't make it work on this website: https://bndmiami.squarespace.com/. It looks great on another website, but after adding the same page layout it's still not working on this one.

UPDATED: I just found out that the difference was the website width. But I still can't remove the padding at the bottom of the section.

Any tips?

On 7/8/2021 at 4:00 PM, Andreu said:

 

Hi,

I can't make it work on this website: https://bndmiami.squarespace.com/. It looks great on another website, but after adding the same page layout it's still not working on this one.

UPDATED: I just found out that the difference was the website width. But I still can't remove the padding at the bottom of the section.

Any tips?

Hi. I don't see map block on homepage. Which page?

On 7/10/2021 at 4:23 AM, tuanphan said:

Hi. I don't see map block on homepage. Which page?

Sorry! It's on the contact page.

17 hours ago, Andreu said:

Sorry! It's on the contact page.

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* contact page map block fullwidth */
[data-section-id="60e6bc7a501d3f22da87b120"] .content-wrapper {
    max-width: 100% !important;
}

On 7/14/2021 at 9:18 AM, tuanphan said:

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* contact page map block fullwidth */
[data-section-id="60e6bc7a501d3f22da87b120"] .content-wrapper {
    max-width: 100% !important;
}

 

Awesome! Thank you! I've been able to remove the top padding on the desktop version but not on the mobile version. Any tips?

Hi I'm having trouble making my map full width in both desktop and mobile view.

URL is https://crane-tuatara-c7de.squarespace.com/ and map is located on Contact page.

Any suggestions?