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

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!

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!

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

15 minutes ago, bangank36 said:

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

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

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 intended

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 intended

Doesn't seem to be working

Just now, SSong said:

Doesn't seem to be working

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

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?

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.

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!

hi @creedon @bangank36 do you know if there is there a general way to target gutter width on the summary block? id like to add a bit of space between projects, every time i do, it either cuts off one project or does nothing at all

site: https://flugelhorn-seahorse-lzrb.squarespace.com

pw: design

@jenniferboddam

Please point us to a specific summary block on a page where you want to achieve this effect.

It is easier for us if we have an element to work with.

@creedon see screen shot or its #block-yui_3_17_2_1_1627943224242_26754 in the 3rd section on the home page

@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.

@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