Arranging and positioning services

  • Resolved ghassanalqazzaz

    (@ghassanalqazzaz)


    7 years, 5 months ago

    Hello Forum,

    I have two sections with services of type A and B respectively. I have 8 services of type A and I have three rows with 3 services per row, the last row has only 2 services in it and I would like them to be aligned in the center, but the current layour looks like so :

    service 1 service 2 service 3

    service 4 service 5 service 6

    service 7 service 8

    as you can see, I would like “service 7” and “service 8” to be located in the center of the row underneath “services 4 to 6”.Since they all belong to the class “roll-icon-box” I cant seem to be able to individually
    format and position the services. The former is valid for the the other section with services of type B.

    Any suggestions and help is highly appreciated.

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jeroen Verhoeven

    (@jeroen-verhoeven)

    7 years, 5 months ago

    Hi there,

    There is a way to edit certain items that share the same class. With CSS you can target the last two items.

    Example:

    .service{
    CSS you use for every service item
    }

    .service:nth-of-type(7) {
    Specific alignment CSS for the seventh item
    }

    .service:nth-of-type(8) {
    Specific alignment for the last service item
    }

    See example below:
    http://www.w3schools.com/cssref/sel_nth-of-type.asp

    Hope this helps!

    Kharis Sulistiyono

    (@kharisblank)

    7 years, 5 months ago

    Hello there,

    Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css? 

    @media only screen and (min-width: 992px){
  .widget_sydney_services_type_a .service:nth-of-type(7) {
    margin-left: 160px;
  }  
}

@media only screen and (min-width: 1200px){
  .widget_sydney_services_type_a .service:nth-of-type(7) {
    margin-left: 200px;
  }    
}
    Thread Starter ghassanalqazzaz

    (@ghassanalqazzaz)

    7 years, 5 months ago

    Thank you both for your eye opening solutions. @kharisblank and @jeroen-verhoeven, both suggestions were helpful and the issue is now resolved.

    Your assistance and support is very much appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Arranging and positioning services’ is closed to new replies.