Jump to content

Summary Block: Space Evenly + Minimum Width

Recommended Posts

How can I set minimum width for each item on summary block and space them evenly?

The CSS I added below almost worked but the spacing became oddly different on each row and sometimes columns. Could it be fixed or is there a better code to achieve this? If it makes a difference I'm also using lazy summaries plugin and have set columns for desktop (4), tablet (3), mobile (1).

www.beehyve.health/our-team
password:abc
 

 /* Column width + Center*/
.sqs-gallery-design-autogrid .summary-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly!important;
  }  
.sqs-gallery-design-autogrid-slide {
  min-width:250px!important;
  margin-left:auto;
  margin-right:auto;
clear: right!important; 
}

image.thumb.png.7fd7fd57c0621f6a05d785e4cc51054f.png

Thanks all 🙂 

Edited by melaniejaane
Update web page info
Link to comment
  • Replies 5
  • Views 359
  • Created
  • Last Reply

Top Posters In This Topic

19 minutes ago, tuanphan said:

I see you used some code to fix this?

#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: 29.56827309236948%;
    margin-right: 5.647590361445783%;
    margin-bottom: 5.647590361445783%;
}

 

Hey @tuanphan unfortunately no,  I was just trialling something else so had my minimum width css turned off. I've turned it back on now.
Even with setting specific margins and width ratio, it still somehow goes all wonky.

Do you know if there's another way to fix this?
Thanks again 🙂 
image.thumb.png.7b8bcdc245a1e1cef79a58d7b18cf5c9.png

Link to comment

Try to bottom of Design > Custom CSS

@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !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
12 hours ago, tuanphan said:

Try to bottom of Design > Custom CSS

@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
}

Thanks @tuanphan this works almost perfectly! It's just the last summary item is sitting slightly off centre.
I tried changing justify-content but it would either move the whole summary block or keep the last item off centre. I also tried adding :last-child but has had no impact. 

What I've added below, would you have any ideas on how to fix? Thanks again 🙂 

www.beehyve.health/our-team
password:abc

/* Summary Block: Column Width + Center*/
@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
  min-width:250px!important;  
  	width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide::last-child{
     justify-content:left!important;
}  

#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid .summary-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly!important;
}  
}

 

Link to comment
On 5/11/2023 at 8:16 PM, tuanphan said:

Try to bottom of Design > Custom CSS

@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
}

 

Try this

@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide:last-child {
    position: relative;
    left: 33.3333%;
}
#collection-6459e9dea470986e80e5866e #block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid .summary-item-list {
    justify-content: unset !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

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.