Centering team page content within each list

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Hi all!

Site password is 1234

Using the Team 2 page layout, I'd like to center the items within each list section while retaining the Max Columns value. I've tried using different design options and using this code in Custom CSS:

.user-items-list-simple {
    justify-content: center;
    display: flex !important;
}

All with no luck thus far. Has anyone come up with a solution for this?

Thanks!

Hi,

You mean move to center?

4 hours ago, tuanphan said:

Hi,

You mean move to center?

Yes, exactly!

On 9/28/2021 at 5:57 AM, tuanphan said:

Hi,

You mean move to center?

Hey @tuanphan,

I was able to piece this code for the header injection together:

<style>
  .user-items-list-simple {
    justify-content: center;
    display: flex !important;
    flex: 1 1 0px
    flex-flow: row nowrap;
}
</style>

<style>
  .list-item {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 0px;
    max-width: 15%;
    height: auto;
    margin: 0 auto;
</style>

It's working for the team page, but is there a way to target it specifically to that page or list sections with those characteristics? E.g., only list sections that don't include a button/list items that include the button "Read Bio"? Thanks!

On 10/2/2021 at 12:16 AM, dl_23 said:

Hey @tuanphan,

I was able to piece this code for the header injection together:

<style>
  .user-items-list-simple {
    justify-content: center;
    display: flex !important;
    flex: 1 1 0px
    flex-flow: row nowrap;
}
</style>

<style>
  .list-item {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 0px;
    max-width: 15%;
    height: auto;
    margin: 0 auto;
</style>

It's working for the team page, but is there a way to target it specifically to that page or list sections with those characteristics? E.g., only list sections that don't include a button/list items that include the button "Read Bio"? Thanks!

Did you add to Page Header or Site wide Code Injection Header?

23 hours ago, tuanphan said:

Did you add to Page Header or Site wide Code Injection Header?

I actually don't know the difference... From the Team page I did Settings-->Advanced-->Code injection and put that in the header

On 10/4/2021 at 8:08 PM, dl_23 said:

I actually don't know the difference... From the Team page I did Settings-->Advanced-->Code injection and put that in the header

You want the code runs on all section on Team 2 page or which section? We can tweak & give new code

On 10/6/2021 at 4:32 AM, tuanphan said:

You want the code runs on all section on Team 2 page or which section? We can tweak & give new code

Hello, following up with another question here – I'm wondering how I can use CSS to center certain items in my simple list.

I have 4 team members, but only 3 per row, how can I center the 4th member

site url: https://www.bronzeville-foundation.com/team

On 2/12/2022 at 3:04 AM, bronzeville said:

Hello, following up with another question here – I'm wondering how I can use CSS to center certain items in my simple list.

I have 4 team members, but only 3 per row, how can I center the 4th member

site url: https://www.bronzeville-foundation.com/team

It looks like you solved?

On 2/13/2022 at 6:58 PM, tuanphan said:

It looks like you solved?

I have the same question:

page: https://playtekitchen2.squarespace.com/team-playte

password: foodiefun

I would like to center the bottom two items like pictured above. See below for what I am trying to fix. Thanks for any advice!

On 2/22/2022 at 2:20 PM, chef_mateo317 said:

I have the same question:

page: https://playtekitchen2.squarespace.com/team-playte

password: foodiefun

I would like to center the bottom two items like pictured above. See below for what I am trying to fix. Thanks for any advice!

 

Add to Design > Custom CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="62132e9a72e2bb66b18e0db3"] li.list-item.list-item-basic-animation:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

On 2/26/2022 at 6:47 PM, tuanphan said:

Add to Design > Custom CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="62132e9a72e2bb66b18e0db3"] li.list-item.list-item-basic-animation:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

This worked perfect! Thank you so much! Another question unrelated to this particular forum topic. The hover effect on the reference site: https://www.bronzeville-foundation.com/team with the slight shadowing and popout on hover. What would be the CSS to achieve this. I have tried to inspect the site, but I am having trouble finding the hover effect / stylizing code. Thanks!

page: https://playtekitchen2.squarespace.com/team-playte

password: foodiefun

On 3/1/2022 at 5:08 AM, chef_mateo317 said:

This worked perfect! Thank you so much! Another question unrelated to this particular forum topic. The hover effect on the reference site: https://www.bronzeville-foundation.com/team with the slight shadowing and popout on hover. What would be the CSS to achieve this. I have tried to inspect the site, but I am having trouble finding the hover effect / stylizing code. Thanks!

page: https://playtekitchen2.squarespace.com/team-playte

password: foodiefun

 

Add this CSS

/* Team playte hover shadow */
.user-items-list-item-container[data-section-id="62132e9a72e2bb66b18e0db3"] {
.list-item[data-is-card-enabled="true"]:hover {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
        box-shadow: 0px 0px 25px #000;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
}
.list-item[data-is-card-enabled="true"] {
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in; 
}}

Hi! I've been trying to do this as well, but I can't make it work. Could you help, @tuanphan? Trying to make the bottom 2 center like the photo in the thread above. I tried this code and changed the data-section-ID to mine.

On 2/27/2022 at 3:47 AM, tuanphan said:

Add to Design > Custom CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="62132e9a72e2bb66b18e0db3"] li.list-item.list-item-basic-animation:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

 

This is the page: https://www.littlebigsister.com/om-oss

On 9/6/2022 at 4:14 PM, Oda said:

Hi! I've been trying to do this as well, but I can't make it work. Could you help, @tuanphan? Trying to make the bottom 2 center like the photo in the thread above. I tried this code and changed the data-section-ID to mine.

This is the page: https://www.littlebigsister.com/om-oss

Try this CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="61d57a890e6dc6033812ce6d"] li:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

Thank you, worked out! It seems to be a little more to the left than to the right – anything I can try out there? Updated on my page, so you can see for yourself. https://www.littlebigsister.com/om-oss

2 minutes ago, tuanphan said:

Try this CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="61d57a890e6dc6033812ce6d"] li:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

 

21 hours ago, Oda said:

Thank you, worked out! It seems to be a little more to the left than to the right – anything I can try out there? Updated on my page, so you can see for yourself. https://www.littlebigsister.com/om-oss

 

You can adjust 50%

On 2/26/2022 at 6:47 PM, tuanphan said:

Add to Design > Custom CSS

/* align center meet the team */
@media screen and (min-width:992px) {
.user-items-list-item-container[data-section-id="62132e9a72e2bb66b18e0db3"] li.list-item.list-item-basic-animation:nth-child(n+4) {
    position: relative;
    left: 50%;
}
}

 

I'd like to do the same thing! I tried changing the section id in this code to mine, but it doesn't seem to be doing anything as far as I can tell. Could you help, @tuanphan?

page: thatflowershopwyo.com/truck

password: flowers

16 hours ago, thatflowershopwyo said:

I'd like to do the same thing! I tried changing the section id in this code to mine, but it doesn't seem to be doing anything as far as I can tell. Could you help, @tuanphan?

 

page: thatflowershopwyo.com/truck

password: flowers

Use this code

/* align center meet the team */
@media screen and (min-width:992px) {
[data-section-id="632d63c21d510e171d52785b"] li.list-item {
    position: relative;
    left: calc(~"100% + 20px");
}
}

On 9/28/2022 at 3:13 AM, tuanphan said:

Use this code

/* align center meet the team */
@media screen and (min-width:992px) {
[data-section-id="632d63c21d510e171d52785b"] li.list-item {
    position: relative;
    left: calc(~"100% + 20px");
}
}

 

Worked perfect. Thank you!

Hey @tuanphan,

I tried one of your codes above but couldn't get it to work. I have three different team lists on the same page and want to center them all. Could you help me by any chance:

https://octahedron-bird-7dpd.squarespace.com/

About Us Page

PW: thefutureisnow2022

Particularly the "Partners" Section but possible the others as well. 

On 10/28/2022 at 10:28 PM, LeonXDavis said:

Hey @tuanphan,

I tried one of your codes above but couldn't get it to work. I have three different team lists on the same page and want to center them all. Could you help me by any chance:

https://octahedron-bird-7dpd.squarespace.com/

About Us Page

PW: thefutureisnow2022

Particularly the "Partners" Section but possible the others as well. 

 

Add to Design > Custom CSS

/* Center about us page list items */
@media screen and (min-width:992px) {
/* partners */
.user-items-list-item-container[data-section-id="634d6a2bdcc91a29a1bbde84"] li:nth-child(n+5) {
    position: relative;
    left: calc(~"100% + 60px");
}
/* managers */
.user-items-list-item-container[data-section-id="635beb75bd7bbd5929b3adbd"] li {
    position: relative;
    left: calc(~"150% + 60px");
}
/* coaches */
.user-items-list-item-container[data-section-id="635bec1aad70df3f1cb20fdc"] li:nth-child(19) {
    position: relative;
    left: calc(~"300% + 60px");
}}

6 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Center about us page list items */
@media screen and (min-width:992px) {
/* partners */
.user-items-list-item-container[data-section-id="634d6a2bdcc91a29a1bbde84"] li:nth-child(n+5) {
    position: relative;
    left: calc(~"100% + 60px");
}
/* managers */
.user-items-list-item-container[data-section-id="635beb75bd7bbd5929b3adbd"] li {
    position: relative;
    left: calc(~"150% + 60px");
}
/* coaches */
.user-items-list-item-container[data-section-id="635bec1aad70df3f1cb20fdc"] li:nth-child(19) {
    position: relative;
    left: calc(~"300% + 60px");
}}

 

Thank you so much! 

Hey @tuanphan,

Thank you again. I am running into one small issue for the managers section of the code (I made some changes and got it to work for the most part) but in some screen sizes the last person in that section is cut off and it is now longer centered. But it works in full screen and when the screen is smaller as well. 

Here is the code: 

/* managers */
.user-items-list-item-container[data-section-id="635beb75bd7bbd5929b3adbd"] li {
    position: relative;
    left: calc(~"50% + 30px");
}

On 11/4/2022 at 11:03 PM, LeonXDavis said:

Hey @tuanphan,

Thank you again. I am running into one small issue for the managers section of the code (I made some changes and got it to work for the most part) but in some screen sizes the last person in that section is cut off and it is now longer centered. But it works in full screen and when the screen is smaller as well. 

Here is the code: 

/* managers */
.user-items-list-item-container[data-section-id="635beb75bd7bbd5929b3adbd"] li {
    position: relative;
    left: calc(~"50% + 30px");
}

Your code, will run on all devices. So some screen sizes, it will create problem.

Which screen size in your screenshot?