Centering team page content within each list

Hi there, i'm having a similar issue and tried the code above, but it wouldnt work as expected… the 7th team member should be aligned to the middle… if i adjust the 50% it will move but not aligned in the middle, as soon as the windowsize changes… ideas anyboy? THANK YOU!

On 5/10/2023 at 7:24 PM, struktiv said:

Hi there, i'm having a similar issue and tried the code above, but it wouldnt work as expected… the 7th team member should be aligned to the middle… if i adjust the 50% it will move but not aligned in the middle, as soon as the windowsize changes… ideas anyboy? THANK YOU!

Can you share link to this page?

On 5/11/2023 at 3:24 PM, tuanphan said:

Can you share link to this page?

hi tuanphan,

here is the link: https://edworx.squarespace.com/team

On 5/15/2023 at 6:18 PM, struktiv said:

hi tuanphan,

here is the link: https://edworx.squarespace.com/team

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="644657f84a277b4b24cb820c"] li:last-child {
    position: relative;
    left: calc(~"100% + 60px");
}
}

hi there – wow, perfect!! thank you SO much!!

@tuanphan I am having the same issue. I've tried adjusting the section ID and nth child, as suggested in your other posts, but I haven't been able to get the desired result. The bottom row of each "team" section should be centered. Site: larso-backend.squarespace.com, password: LARSO

13 hours ago, SmallSitesSarah said:

@tuanphan I am having the same issue. I've tried adjusting the section ID and nth child, as suggested in your other posts, but I haven't been able to get the desired result. The bottom row of each "team" section should be centered. Site: larso-backend.squarespace.com, password: LARSO

I don't see team section. Can you share link to an exact page?

2 hours ago, tuanphan said:

I don't see team section. Can you share link to an exact page?

Yes! Here you go: https://larso-backend.squarespace.com/about-larso

21 hours ago, SmallSitesSarah said:

Yes! Here you go: https://larso-backend.squarespace.com/about-larso

Use this code to Custom CSS box

/* Center list item */
@media screen and (min-width:768px) {
/* LARSO Staff */
.user-items-list-item-container[data-section-id="64cab926f07fd41f66a3731b"] li:nth-child(n+4) {
    left: calc(~"50% + 30px");
    position: relative;
}
/* Friends of LARSO */
.user-items-list-item-container[data-section-id="64cac35a9ed23354cccd43de"] li:nth-child(n+7) {
    position: relative;
    left: calc(~"100% + 60px");
}}

On 8/4/2023 at 7:11 AM, tuanphan said:

Use this code to Custom CSS box

/* Center list item */
@media screen and (min-width:768px) {
/* LARSO Staff */
.user-items-list-item-container[data-section-id="64cab926f07fd41f66a3731b"] li:nth-child(n+4) {
    left: calc(~"50% + 30px");
    position: relative;
}
/* Friends of LARSO */
.user-items-list-item-container[data-section-id="64cac35a9ed23354cccd43de"] li:nth-child(n+7) {
    position: relative;
    left: calc(~"100% + 60px");
}}

 

Fabulous. Thank you! Can you explain the calc(~# + #px) code? I want to learn how it works in case the number of bios changes. I understand the rest. 

17 hours ago, SmallSitesSarah said:

Fabulous. Thank you! Can you explain the calc(~# + #px) code? I want to learn how it works in case the number of bios changes. I understand the rest. 

left is move item to right a bit

position: relative, you need to declare this to make left, right attribute work

by default you can use left: calc(50% + 30px) means move to right 50% + 30px

but when you add calc code to CSS, it won't able to read this calc symbol, and you need to add ~ and " symbol

On 8/7/2023 at 5:49 AM, tuanphan said:

left is move item to right a bit

position: relative, you need to declare this to make left, right attribute work

by default you can use left: calc(50% + 30px) means move to right 50% + 30px

but when you add calc code to CSS, it won't able to read this calc symbol, and you need to add ~ and " symbol

 

Thank you for explaining! 

On 8/9/2023 at 9:48 AM, SmallSitesSarah said:

Thank you for explaining! 

I forgot, about why I use 50%. It's just that I tried some values like 25%, 50%, 100%...and found 50% to be the best.
For 30px, the space between items is 60px, so I tried 60px or 30px.

@tuanphan At a loss.... I have used the solution in this thread for 3-4 websites, but I cannot coax it to work in the footer. On desktop, the logos in the second line  of the footer should be centered. Can you help?  (www.muldowney.com)

On 3/1/2024 at 10:14 AM, SmallSitesSarah said:

@tuanphan At a loss.... I have used the solution in this thread for 3-4 websites, but I cannot coax it to work in the footer. On desktop, the logos in the second line  of the footer should be centered. Can you help?  (www.muldowney.com)

You can use this CSS code

#block-yui_3_17_2_1_1708573270824_58636 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@tuanphan THANK YOU

I'd love your help as well. I've tried many of the codes you've created for others, tweaking with my section IDs with no success.

Here is the page - https://haitiprojects1.squarespace.com/our-team , p/w "design"

I'm looking for all rows of staff to be centered on this page. Thank you.

On 4/16/2024 at 7:37 PM, SarahBethGraphics said:

I'd love your help as well. I've tried many of the codes you've created for others, tweaking with my section IDs with no success.

Here is the page - https://haitiprojects1.squarespace.com/our-team , p/w "design"

I'm looking for all rows of staff to be centered on this page. Thank you.

This is code for Artisanat and Women’s Health Clinic. If it works, I will check other lists

@media screen and (min-width:992px) {
/* Artisanat */
section[data-section-id="661e6a24dd75df35b293a9e3"] .user-items-list-item-container>li:nth-child(n+1) {
    position: relative;
    left: calc(~"50% + 10px");
}
/* Womens Health Clinic */
.user-items-list-item-container[data-section-id="661e6ac1e057f947a10a6292"]>li:nth-child(n+1) {
    position: relative;
    left: calc(~"50% + 10px");
}
}

I've unsuccessfully tried various versions of this code. I have multiple simple lists in sections on the teams page and would love all sections centered. Can you help?

https://haitiprojects1.squarespace.com/our-team

pw = "design"

Thank you!

On 4/23/2024 at 9:26 AM, SarahBethGraphics said:

I've unsuccessfully tried various versions of this code. I have multiple simple lists in sections on the teams page and would love all sections centered. Can you help?

https://haitiprojects1.squarespace.com/our-team

pw = "design"

Thank you!

 

Strange, I remember I send code for this question somewhere.

This code for Women's Health Clinic, if it works, I will send code for other

Use code to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="661e6ac1e057f947a10a6292"] li {
    position: relative;
    left: calc(~"50% + 10px");
}
}