Jump to content

Image block padding CSS problem. Ignoring site margin rules.

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.