How to make a code block full width?

Looking to make this code-block full width, can anybody help?

noplasticproject.com/liverpool

@grayscaleprint Add to Home > Design > Custom CSS

div#map-block-liverpool-page {
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
}

Thanks for the response Tuanphan! However does not seem to work.

@grayscaleprint code block, you mean Maps?

Try this

 div#map-block-liverpool-page {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Unfortunately not, argh! It is driving me crazy

@grayscaleprint try inserting my code and i'll check why it not working.

Inserted under /// Full width code block

@grayscaleprint where did you insert? I just checked your page source,...didn't see the code.

Amazing! I have sorted it, cleared my custom CSS and inserted again and it worked. Thanks so much. Just need to sort the padding at top and bottom now. Are the CSS terms top and bottom?

@grayscaleprint add: padding-top:0; padding-bottom:0;

That just seems to break it all together – g'ah

@grayscaleprint

 div#map-block-liverpool-page {
     max-width: 100% !important;
     padding: 0 1px 2px 3px !important;
 }

0 1 2 3 is padding top - right - bottom - left.

Looks fine here

Done! Have you got Paypal so I can buy you a coffee?

@tuanphanIt looks like you might have the answer to my question. I am trying to embed an ESRI Story Map into my website and can't seem to get it to be full width. Where do I put the code that you provided above? the Custom CSS section, or the CSS attached to the window i've embedded a source code into?

Thanks for any help.

2 hours ago, jsmithsb said:

@tuanphanIt looks like you might have the answer to my question. I am trying to embed an ESRI Story Map into my website and can't seem to get it to be full width. Where do I put the code that you provided above? the Custom CSS section, or the CSS attached to the window i've embedded a source code into?

Thanks for any help.

Can you share link to that page?

Was trying to solve this problem for two days before finally finding the solution somewhere else online! This worked for me:

1) Target your block of code, ideally using a class that you set within the block rather than a page section, and make sure you've applied the following (as folks have mentioned above):

Quote

 overflow-x: hidden !important;
 max-width: 100% !important;

2) CRITICAL: If it hasn't worked, edit your code block's settings and set the Content Width to "L." (See attached.)

On 5/6/2021 at 12:33 AM, mitchelhunt said:

Was trying to solve this problem for two days before finally finding the solution somewhere else online! This worked for me:

1) Target your block of code, ideally using a class that you set within the block rather than a page section, and make sure you've applied the following (as folks have mentioned above):

2) CRITICAL: If it hasn't worked, edit your code block's settings and set the Content Width to "L." (See attached.)

To find block id, use this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hello, I am running into a simliar issue.

I used Elfsight to create a video slider for a client's website that i'm building on squarespace.

I cannot get it to go full screen and I am not sure what to use for the class ID. I downloaded the chrome extension to find the squarespace IDs and I have tried both the code block ID and the Section ID and am not having any luck with either.

https://www.volterratechnology.com/

That is the website. It is the homepage slider that i'm having troubles with. Hopefully, someone can help!

Thanks in advance!

On 8/20/2019 at 7:32 AM, tuanphan said:

@grayscaleprint code block, you mean Maps?

Try this

 div#map-block-liverpool-page {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Tried this today. Doesn't seem to be working for me. I am using Squarespace 7.0 and using the block's ID #. Please help

 

I am doing this for a code block, and it isn't working. Refer to the comment I just made plz & thank you!

On 2/3/2022 at 12:50 AM, MitchTheBoss said:

Hello, I am running into a simliar issue.

I used Elfsight to create a video slider for a client's website that i'm building on squarespace.

I cannot get it to go full screen and I am not sure what to use for the class ID. I downloaded the chrome extension to find the squarespace IDs and I have tried both the code block ID and the Section ID and am not having any luck with either.

https://www.volterratechnology.com/

That is the website. It is the homepage slider that i'm having troubles with. Hopefully, someone can help!

 

Thanks in advance!

It looks fine to me. Did you solve it?

On 2/4/2022 at 1:52 AM, pkoziol said:

I am doing this for a code block, and it isn't working. Refer to the comment I just made plz & thank you!

Can you share link to page where you use Code Block? We can check easier

On 2/8/2022 at 4:19 AM, tuanphan said:

It looks fine to me. Did you solve it?

Can you share link to page where you use Code Block? We can check easier

https://pmsquare.com/test-page Thanks!!

On 2/11/2022 at 10:55 PM, pkoziol said:

https://pmsquare.com/test-page Thanks!!

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1644594799064_1892 {
    width: 100% !important;
}
body#collection-6206866a0aa116132ae6c6ba section.Main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

13 hours ago, tuanphan said:

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1644594799064_1892 {
    width: 100% !important;
}
body#collection-6206866a0aa116132ae6c6ba section.Main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

You're a hero. Thank you.

Can anyone help me re-size a code block to full size. All the above doesnt seem to work for me. Assistance would be appreciated.

Website: https://cornet-asparagus-m6a4.squarespace.com/our-people