Image block padding CSS problem. Ignoring site margin rules.

Site URL: https://crocodile-butterfly-nxj6.squarespace.com/

Hi there

I'm having an issue with image block padding. Running 7.1

I wanted to reduce the padding on my image blocks using the following:

//image block padding//
.sqs-block.image-block {
 padding: 5px !important;
}

This is working - EXCEPT now the image blocks are ignoring the 10vw site margin that I set in "Site Styles" > "Site Spacing"

The image blocks are extending past the site margin on the left and right sides.

Is there a solution that allows custom image block padding WHILE maintaining my site margin?

Thanks everyone!

https://crocodile-butterfly-nxj6.squarespace.com/

password: HURDLE

5 hours ago, ianhurdle said:

Site URL: https://crocodile-butterfly-nxj6.squarespace.com/

Hi there

I'm having an issue with image block padding. Running 7.1

I wanted to reduce the padding on my image blocks using the following:

//image block padding//
.sqs-block.image-block {
 padding: 5px !important;
}

This is working - EXCEPT now the image blocks are ignoring the 10vw site margin that I set in "Site Styles" > "Site Spacing"

The image blocks are extending past the site margin on the left and right sides.

Is there a solution that allows custom image block padding WHILE maintaining my site margin?

Thanks everyone!

@tuanphan@bangank36@paul2009

https://crocodile-butterfly-nxj6.squarespace.com/

password: HURDLE

Try

.sqs-layout > .sqs-row {
  margin-left: 0;
  margin-right: 0;
}

Let me know how it works

@bangank36

Thanks so much for your reply. I tried that out.

It basically just pulled in the margin of everything below the header. 

Is there a way to only target the areas with the photo blocks?

Thank you!

@bangank36

Just wondering if you had any other ideas for this?

Thanks!

8 hours ago, ianhurdle said:

@bangank36

Just wondering if you had any other ideas for this?

Thanks!

Try the following code

#collection-61e60dd05ee8a16e2b8d81ad .sqs-block.image-block {
  padding: 5px !important;
}

#collection-61e60dd05ee8a16e2b8d81ad .horizontalrule-block + .row + .row ,#collection-61e60dd05ee8a16e2b8d81ad .horizontalrule-block + .row + .row + .row {
  margin: 0 17px;
}

Let me know how it works

@bangank36

Yes!! Perfect. Thank you so much! Huge help!