Jump to content

How to change the paddings between summary blocks on a index page?

Recommended Posts

Hi y'all! I have this index page where it has 6 grid summary blocks in 3 columns and 2 rows, each summary block has a gutter that is as wide as width A (see image). How do I make width B the same as width A? And how do I reduce the margin of each row (C)

And can the CSS code live in the advanced setting of this page instead of custom css?

Here the link, password is 185fff. The sooner the better. Thank you thank you!

FFFPUDfeaturedproduct.jpg

Link to comment
  • Replies 13
  • Views 2.3k
  • Created
  • Last Reply
6 hours ago, SSong said:

Hi y'all! I have this index page where it has 6 grid summary blocks in 3 columns and 2 rows, each summary block has a gutter that is as wide as width A (see image). How do I make width B the same as width A? And how do I reduce the margin of each row (C)

And can the CSS code live in the advanced setting of this page instead of custom css?

Here the link, password is 185fff. The sooner the better. Thank you thank you!

FFFPUDfeaturedproduct.jpg

I can not see the section you showed in the homepage?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
7 minutes ago, SSong said:

Whoops... Should be there now. Not sure what happened, seems like the index page section got moved somewhere else.

try

#block-2b4273e9e61e112d248e + .sqs-row .sqs-col-4 .sqs-block {
  padding-right: 0;
  padding-bottom: 0;
}
#block-2b4273e9e61e112d248e + .sqs-row + .sqs-row .sqs-col-4 .sqs-block {
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0
}

note that I used css selector to select the row based on the header right above it, so if you change the block order or replace them the code may not work as intendedimage.png.6052cfc698a2bf829b7208d4a76a7b94.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
11 minutes ago, bangank36 said:

try


#block-2b4273e9e61e112d248e + .sqs-row .sqs-col-4 .sqs-block {
  padding-right: 0;
  padding-bottom: 0;
}
#block-2b4273e9e61e112d248e + .sqs-row + .sqs-row .sqs-col-4 .sqs-block {
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0
}

note that I used css selector to select the row based on the header right above it, so if you change the block order or replace them the code may not work as intendedimage.png.6052cfc698a2bf829b7208d4a76a7b94.png

Doesn't seem to be working

Link to comment
Just now, SSong said:

Doesn't seem to be working

Did you add it into Design->Custom CSS panel?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
15 minutes ago, bangank36 said:

Did you add it into Design->Custom CSS panel?

It worked! I guess it doesn't work when you put html styling in the advance settings of index pages. But I notice that there's still a lot of vertical spacing on mobile, any idea how to solve that?

Link to comment
1 minute ago, SSong said:

I guess it doesn't work when you put html styling in the advance settings of index pages.

For index pages you have to put the CSS in the the index page itself. Not the sub pages. Also that CSS needs to be wrapped in a style tag.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

For index pages you have to put the CSS in the the index page itself. Not the sub pages. Also that CSS needs to be wrapped in a style tag.

Right, I did put it in the sub pages with the style tag. I will remember that from now on. Thank you!

Link to comment
  • 4 months later...

@jenniferboddam

Try the following.

.sqs-block-summary-v2 .summary-item {

  margin-right : 0 !important;

  }

The trick with the summary block items is that SS is setting CSS properties via code with the style attribute. When that is done those properties override all higher values. Unless one of the higher values has !important set.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon That didn't really work, it moved everything for some reason. I've managed to get part of it how I want I just cant seem to change the gutter width at all

 

I've attached a screen shot, the left side is exactly how I want it, I just want the right side to be moved over to the right. Similar to how the left looks. I manged to center it but then the size of the images goes way too big. I cant seem to keep it at the size it is and center it

Screen Shot 2021-08-09 at 2.39.35 PM.png

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.