Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Making a full width map code block?


crosswalkcc

Question

10 answers to this question

Recommended Posts

  • 1

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
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!

Link to comment
  • 0
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?

Edited by crosswalkcc
Mistyped.
Link to comment
  • 0

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 0
Posted (edited)

 

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?

Edited by Andreu
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

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...