Jump to content

Full width code block with zero padding on on page.

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.cyberacoustics.com/caessentials



I have found a lot of global solutions for this but I have not been able to use those to target a specific instance. I do not want to make the width of all code blocks full width. I want only the one custom coded block to be full width.

I have tried to target the data-section-id


User Tuanphan came close to answering this question a few times but I can't quite figure out how to take the provided global solution below and target one single block id. 


div#block-yui_3_17_2_1_1574418104344_4910 {
    padding-left: 0;
    padding-right: 0;
.content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;


Any help greatly appreciated. 





Link to comment
  • Solution

As a general rule of thumb targeting just a block for padding/margin adjustments won't make it full-width. You have to target the appropriate parent elements as well. Which tuanphan's code shows but in that particular code case not specific to a particular content-wrapper.

Add the following to Design > Custom CSS.

[data-section-id="61a534af6da1cf0463880f96"]:not( .full-bleed-section ) > .content-wrapper,

   padding : 0;

[data-section-id="61a534af6da1cf0463880f96"] .sqs-layout > .sqs-row {

  margin : 0;

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.