Code Block - Full Height Adjustment

Site URL: https://stlawrencegoldfs.squarespace.com/summer-blossom

I have added a widget into a code block and now have a white border top and bottom - the block needs to be full height so I have a seamless transition between sections. I have the height set at 10 which seems to be the lowest I can go. Is there a CSS code that will solve this white border problem? New to CSS and appreciate any help.

Add the following to Design > Custom CSS.

// full bleed blocks, uses LESS

[data-section-id="627039bf1a0c94590514a959"],

  {
  
    * {
    
      padding : 0 !important;
      
      }
      
    .sqs-layout {
    
      > .sqs-row {
      
        margin-left : 0;
        margin-right : 0;
        
        }
        
      .sqs-row .sqs-block {
      
        padding : 0 !important;
        
        }
        
      }
      
  }

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

To address multiple blocks just repeat the first line and change the id.

Let us know how it goes.

Works fine, thank you so much!

Hi Creedon,

Is there additional code so this fix also works in mobile?

Thank you.

Martin

I have updated my previous post. It now says take out all the padding for all elements in the indicated section.

One thing I did notice, is that the code block is not responsive on very wide viewports. This appears to be a limitation of the code. You may want to consider putting a background color on that section for those who might view your page wide viewports.

Let us know how it goes.

Hi there,

Thank you again for the help - yes, it does work to remove that white space in mobile however the title of the slide is very close to the top margin - could code be added to pad just the top of the slider - I managed to solve the bottom pagination icons by setting them to "outside" of the image as they were also getting lost on the page. Sorry for all this fuss - picky clients.

Best,

Martin

Quote

the title of the slide is very close to the top margin

I'm not seeing this. Could you post a pic to show what you are seeing?

I also updated my code again as I forgot to remove some margins that cause overflow.