Sydney Pro: How to create custom service icon IDs?

I would like to format individual service icons for Sydney Pro’s service style 2.

My website is https://elevarapartners.com. I would like to change the padding of the two farthest left service icons on the home page so they will stay vertically aligned within the blue service box, corresponding with the browser width.

Please let me know any solutions that come to mind. Thank you!

Hello there,

You can use :nth-child(n) selector target n number of repeated element. For example:

    /* First service icon */
    .widget_sydney_services_type_a .service:nth-child(1) .icon {
      border: 1px solid red;
    }

    /* Second service icon */
    .widget_sydney_services_type_a .service:nth-child(2) .icon {
      border: 1px solid red;
    }

    /* Third service icon */
    .widget_sydney_services_type_a .service:nth-child(3) .icon {
      border: 1px solid red;
    }

Regards,
Kharis

Thank you! I just had to change .icon to .roll-icon-box, but after I did that it worked perfectly. Thanks Kharis!

Great!

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