Issue with carousel summary block display in SS 7.0 after adding custom code to center SS 7.0 gallery grid blocks

Site URL: https://www.kurlycreative.com/branding-squarespace-services

Hello! I've added the following css code to centre my summary grid gallery blocks in SS 7.0:

//Centrer grid summary blocks//
.sqs-block-summary-v2 .summary-item-list {
 display:flex;
flex-wrap:wrap;
 justify-content:center;
}

 but once added, it seems to affect my carousel summary blocks, which are now displaying as 1 long section (rather than 7 different separate sections which you should be able to scroll between). Does anyone know how to fix this? URL for carousel summary block above ('why squarespace? section at bottom of page')

Example of how the carousel summary block should look like/was looking like before this code was added.

Any help would be so appreciated! Thank you! 🙂

Without above code, I see summary centered here. Can you explain clearly?

Quote

I've added the following css code to centre my summary grid gallery blocks in SS 7.0:

Thank you for your reply! I'm sorry, I'm not too sure what you mean. The first screenshot I shared in my first message is what the summary block is supposed to look like (this is what it looked like before the code was added), once the code was added - here is a screenshot attached of what that 'why squarespace?' summary block now looks like. Let me know if this helps, or please let me know any more info you need. Thank you!

You can replace this .sqs-block-summary-v2

with block id.

use this tool to find block id.

Amazing thank you so much!

The summary blocks I use the code for appear on multiple blog posts and pages so I think I'll just have to remove the summary block that's having issues (as in the screenshots I shared)  and add that content in a different way.

Thanks for your help!

On 5/2/2021 at 4:20 AM, Kate_B said:

Amazing thank you so much!

The summary blocks I use the code for appear on multiple blog posts and pages so I think I'll just have to remove the summary block that's having issues (as in the screenshots I shared)  and add that content in a different way.

Thanks for your help!

You can target Summary Grid only with this code

[data-block-json*="autogrid"] .summary-item-list {
 display:flex;
flex-wrap:wrap;
 justify-content:center;
}

oh amazing thank you so much!

On 6/13/2021 at 5:42 PM, Kate_B said:

oh amazing thank you so much!

Do you wan to fix this?

Site URL – https://www.kurlycreative.com/

1. (Tablet-Services) Stacked these boxes?

ah yes please!

On 6/22/2021 at 6:27 PM, Kate_B said:

ah yes please!

Add to Design > Custom CSS

/* Stacked services boxes on tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#block-yui_3_17_2_1_1605534747307_6328+.row .span-4 {
    width: 100% !important;
}
}

Thank you so sooo much! 😄  😄

I know this is completely unrelated - but do you know what the code name for a Squarespace code block is in 7.1? I'm trying to reduce the padding of code blocks across a 7.1 site, I've tried this code but it isn't working:

//decrease code block padding//
.sqs-block.code-block {
   padding: -5px -5px -5px -5px;
 }


Thanks again for you help!

On 6/25/2021 at 8:29 PM, Kate_B said:

Thank you so sooo much! 😄  😄

I know this is completely unrelated - but do you know what the code name for a Squarespace code block is in 7.1? I'm trying to reduce the padding of code blocks across a 7.1 site, I've tried this code but it isn't working:

//decrease code block padding//
.sqs-block.code-block {
   padding: -5px -5px -5px -5px;
 }


Thanks again for you help!

Hi. Padding has no negative value.

You need to use margin

margin: -5px -5px -5px -5px;

or use shorter code

margin: -5px;

Amazing, thank you!

On 7/5/2021 at 9:56 PM, Kate_B said:

Amazing, thank you!

Do you need fix these other problems?

Site URL – https://www.kurlycreative.com/

1. (Desktop – services) The lines in the list are not aligned

https://www.kurlycreative.com/branding-squarespace-services

2. (Desktop – Services) Text in different blocks so the block size is not equal, it doesn’t look good.

https://www.kurlycreative.com/branding-squarespace-services

3. (Desktop – Blog posts) Text size in pagination is a bit small.

https://www.kurlycreative.com/the-blog/dream-clients-new-business

4. (Mobile – Header) Header takes up a large space. Do you want to reduce header height?

https://www.kurlycreative.com/

5. (Mobile – Menu) Reduce space between Blog and Free consult call

https://www.kurlycreative.com/

6. (Mobile – Services) The spacing between the text and the right, left pages is uneven

https://www.kurlycreative.com/branding-squarespace-services

7. Still have some other issues