Sydney Pro Centre Employees with 2 and 5 in widget - type b Style 1

HI Kharis

I’ve been searching Support and trying various CSS solutions but haven’t found something that works for all of my Employees. I have a few Type b, style 1 Employee widgets on this page: https://www.nb-website-design.co.uk/thurstanhoskin/our-staff/

Where there are 2 employees and 5 employees in a widget I need them to be centred - the 5 employee widget under the title Residential Conveyancying is currently centred using the following CSS from another thread:

@media only screen and (min-width:992px){
.widget_sydney_employees_type_b .roll-team .team-item:nth-of-type(4){
margin-left: 17%;
}
}

and I can see how that works and it looks great but I don’t know the best way to make it work for 2 employees as well.

I hope that makes sense. Can you help? Let me know if you want me to remove that additional CSS for the 5 employees.

Thank you very much!

Nik.

Hello there,

Have you tried the “Sydney FP: Employees” widget which allows you to center the employee items?

Regards,
Kharis

Hi Kharis

Yes, I’m using Sydney FP: Employees Type B, Style 1 widgets - all are set to Content Alignment: Center.

Nik.

Hello Nik,

Please try adding the below extra CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {
      .roll-team.type-b.style1 {
        width: 650px;
        margin-left: auto;
        margin-right: auto;
      }
      .roll-team.type-b.style1 .col-sm-6 {
        width: 50% !important;
      } 
    }

Regards,
Kharis

Hi Kharis

Thank you. I’ve added your code above and it centres the lines with 2 employees, but it also changes the 3 and 5 employee sections to 2 employees on each line and where there is an odd number of employees on the line (i.e. 1 employee), they are over to one side and not centred.

https://www.nb-website-design.co.uk/thurstanhoskin/our-staff/ - this now has your CSS above but I have commented out the CSS I posted originally.

Thank you for your help so far!

Nik.

    @media only screen and (min-width: 992px) {
      #panel-173-1-0-0 .roll-team.type-b.style1 {
        width: 650px;
        margin-left: auto;
        margin-right: auto;
      }
      #panel-173-1-0-0 .roll-team.type-b.style1 .col-sm-6 {
        width: 50% !important;
      } 
    }

Try this code. #panel-173-1-0-0 is the ID of your first employees row.

Regards,
Kharis

Hi Kharis

Thank you for this. Your new code works and I’ve used it to centre all of the employee widgets that contain only two employees.Along with your originally suggested code, the page now looks much better. It’s not an ideal solution - it will be a pain for my clients when they have to add or remove employees - but there’s obviously no simpler way of centering the employees in the widget.

https://www.nb-website-design.co.uk/thurstanhoskin/our-staff/

Thanks again

Nik.

To get this ID selector that wraps your employees widget, you can use the web browser’s inspector tool. https://www.lifewire.com/get-inspect-element-tool-for-browser-756549

42

You should do CSS adjustment after editing page’s elements that changes ID names.

Regards,
Kharis

That’s great Kharis, thank you for your time on this :star_struck:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis