team section featured

[jeffcardella]

I have 4 team members https://whitestagrealty.com/

If the window is wide, they all show up on one row and it looks fine.

When the window is narrow, it creates two rows, and puts 3 people on the first row, and one person on the second row.

All images are exactly the same size.

The CSS I am using is as follows:

ul.multiple-team-section li.multi-team {
float: none;
display: inline-block;
}

However, the person on the bottom row is not centered. "Jeff" shows up about 20 pixels to the right of "Chris"

HOW DO I GET THE BOTTOM ROW TO BE CENTERED?

Please and thanks

 

[Satyendraa]

Hello there,

Use this code in Additional CSS "Appearance > Customize > Additional CSS"

@media screen and (max-width: 1024px){
ul.multiple-team-section li.multi-team:nth-of-type(4n+4) {
    margin-right: 0%;
}
}

This will work for you.

Kind Regards

 

[jeffcardella]

I have a follow up question to my earlier question. We are going to be adding another team member in about a week, and then we are going to be adding another team member in about a month.

I am trying to find a long term solution so that we do not have to contact you guys for CSS code every time we add a team member.

I added a fifth team member (which created a new row) and the fifth member was not centered. I took this down temporarily. Our number of team members is going to be changing alot every month or so, and we want it to be centered no matter how many team members we have.

How do we make it so that the new rows will all be centered no matter how many team members we have.

Thanks

 

[Satyendraa]

Hello there,

I forwarded this to our dev team they will look into it and update theme.
So that you won't get any issue.

Kind Regards

 

[jeffcardella]

Got it, thanks. For the time being, if we have 6 members, do we need to do to center the bottom row?

 

[Satyendraa]

Hello there,

Once you add your all team member, Do share your site link, I will help you with that.

Kind Regards

 

[jeffcardella]

We know have 5 team members https://whitestagrealty.com/

This looks very strange since it does 4 on the first row and 1 on the second row.

How do we make the images smaller so that they will all fit on one row?

 

[Satyendraa]

Hello there,

Use this code in Additional CSS "Appearance > Customize > Additional CSS"

ul.multiple-team-section li.multi-team {
    width: 17.3%;
}
ul.multiple-team-section li.multi-team:nth-of-type(4n+4) {
    margin-right: 2.66%;
}

ul.multiple-team-section li.multi-team:nth-of-type(5n+5) {
    margin-right: 0px;
}

This will work for you.

Kind Regards

 

[jeffcardella]

I tried this. This does not work. This puts 3 people on the first row, and 2 people on the second row. It also does not center a nd moves everything to the left. (see the attached)

How do we make the images smaller so that they will all fit on one row?

 

[Satyendraa]

Hello there,

Please add this CSS at the top of Additional CSS

@media screen and (min-width: 1024px){
ul.multiple-team-section li.multi-team {
    width: 17.3%;
}
ul.multiple-team-section li.multi-team:nth-of-type(4n+4) {
    margin-right: 2.66%;
}

ul.multiple-team-section li.multi-team:nth-of-type(5n+5) {
    margin-right: 0px;
}}

Thank you