Jump to content

Centering team page content within each list

Recommended Posts

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!

Edited by dl_23
Link to comment
On 9/28/2021 at 5:57 AM, tuanphan said:

Hi,

You mean move to center?

image.thumb.png.716cbb6678dd72ab86e12f7c3bff5d6a.png

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!

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

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

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
  • 4 months later...
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

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

image.thumb.png.d1e11c4efb13f355838cdcd56317f295.png

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
  • 2 weeks later...
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!

 

Screen Shot 2022-02-21 at 11.16.02 PM.png

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

 

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

 

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

 

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
  • 6 months later...

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

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

 

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

 

 

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

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
  • 3 weeks later...
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

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

 

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
  • 4 weeks later...
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");
}}

 

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

Link to comment

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

Screen Shot 2022-11-04 at 12.00.22 PM.png

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

Screen Shot 2022-11-04 at 12.00.22 PM.png

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

Which screen size in your screenshot?

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.