Jump to content

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

Recommended Posts

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! 🙂

Screenshot 2021-04-17 at 22.55.54.png

Link to comment
  • Replies 13
  • Views 969
  • Created
  • Last Reply

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!

Screenshot 2021-04-19 at 22.23.50.png

Link to comment
  • 2 weeks later...

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!

Link to comment
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;
}

 

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
  • 1 month later...
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;
}
}

 

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

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!

Link to comment
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;

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

kurlycreative.com-01-min.png

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

kurlycreative.com-02-min.png

 

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

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

kurlycreative.com-05-min.png

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

https://www.kurlycreative.com/

kurlycreative.com-06-min.png

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

https://www.kurlycreative.com/

kurlycreative.com-07-min.png

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

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

kurlycreative.com-08-min.png

7. Still have some other issues

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

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.