Full width code block with zero padding on on page.

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

Hello, 

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. 

https://www.cyberacoustics.com/caessentials

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,
#block-yui_3_17_2_1_1638215652598_9142

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

Hi Creedon, 

Thank you for the quick response &  solution! It works perfectly. This is great and I was already able to use this solution on another page.  (https://www.cyberacoustics.com/office-environment-linkedin) 

Thanks again! 

-Alexander

16 minutes ago, amacleay said:

Thank you for the quick response &  solution! It works perfectly. This is great and I was already able to use this solution on another page. 

Excellent!