ianhurdle Posted January 22, 2022 Share Posted January 22, 2022 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
Beyondspace Posted January 22, 2022 Share Posted January 22, 2022 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ianhurdle Posted January 22, 2022 Author Share Posted January 22, 2022 (edited) @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! Edited January 22, 2022 by ianhurdle Link to comment
ianhurdle Posted January 24, 2022 Author Share Posted January 24, 2022 @bangank36 Just wondering if you had any other ideas for this? Thanks! Link to comment
Beyondspace Posted January 25, 2022 Share Posted January 25, 2022 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ianhurdle Posted January 25, 2022 Author Share Posted January 25, 2022 @bangank36 Yes!! Perfect. Thank you so much! Huge help! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment