Jump to content

Changing Summary Block Spacing

Recommended Posts

I'm working on formatting a summary block (list layout) on the Anya (Bedford) template, and I ran into a snag. I'm trying to reduce the space between items (in this case, titles, because I'm not using anything else), and I used the following CSS:


.summary-block .summary-item {
 margin-top: -30px !important;
}

.summary-block{
 margin-bottom:-30px !important;
}

When I had the custom CSS window open, everything looked exactly like I wanted it to. Then I saved it and refreshed the page, and they're showing up far apart again. The code is still there.

Any advice? (For what it's worth, I tried it both with and without the !important.)

http://livingspiritumc.org/sample-blog

Edited by AQP
Initial Revision
Link to comment
  • 7 months later...

AQP, I'm not sure if this will work, but here's what I did: 

.summary-item {
 margin-top: -30px !important;
}

Deleting the rest of the code you wrote and using just what's above worked for me, both in the custom CSS window and after I saved.

(For what it's worth, I know very little about CSS, and in fact used your code to edit the spacing on my site. I tinkered with it until I arrived at only the code that made a difference.)

Hope that helps. Thanks again for posting your code. 

EDIT: I did some more tinkering, because I wanted to shrink the margin at the bottom of the summary block, and here's what worked for me:

.sqs-block-summary-v2 {
  margin-bottom: -40px !important;
}

I then consolidated the two, because why not (I don't know if this is how you're supposed to organize CSS, but it seemed logical) : 

.sqs-block-summary-v2 {
.summary-item {
  margin-top: -10px !important;
}
  margin-bottom: -40px !important;
}

It still works in both the custom CSS window and after save. Again, hope that helps. 👍

Edited by kkeystone
Added code
Link to comment
  • 1 year later...
On 10/29/2021 at 5:36 AM, JohnMillea said:

I've tried to use this code, but I have a border, and it doesn't shrink with the margin. Is there a way to actually change the size of the block? I really want to get rid of that white space at the bottom.

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.