Summary Block: Space Evenly + Minimum Width

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

Thanks all 🙂 

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%;
}

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 🙂 

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

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

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