Services Post alignment FrontPage Issue

Hi,
How can I set my services posts on the FrontPage in a way that they are balanced?
I want to show 5 services in total. Either there should be 3 on the top column and 2 in the bottom BUT in the middle
OR they should be 2 on the 1st and 2nd column and 1 in the 3rd.

Here is my website link http://client123.website/
Thank you,
Afia

Dear Afia,

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.col-md-6 {
    width: 33.33333333%;
  }

  .widget_sydney_services_type_a .service.col-md-6:nth-of-type(2n+1) {
    clear: none;  
  } 

  .widget_sydney_services_type_a .service.col-md-6:nth-of-type(3n+1) {
    clear: left;  
  }   
  
}

@media only screen and (min-width:992px) and (max-width:1199px) {
  
  .widget_sydney_services_type_a .service.col-md-6:nth-of-type(4) {
    margin-left: 169px;
  }  
  
}

@media only screen and (min-width:1200px){
  
  .widget_sydney_services_type_a .service.col-md-6:nth-of-type(4) {
    margin-left: 200px;
  }    
  
}

Regards,
Kharis

Thank you so much Kharis,
The code works in Type A Services widget but it does not work in Type B. Can you please let me know how can I get this code to work in Type B Services.
Thank you,

Dear Afia,

Try adding this code:


@media only screen and (min-width:992px) {
  
  .widget_sydney_services_type_b .service.col-md-4 {
    width: 33.33333333%;
  }

  .widget_sydney_services_type_b .service.col-md-4:nth-of-type(2n+1) {
    clear: none;  
  } 

  .widget_sydney_services_type_b .service.col-md-4:nth-of-type(3n+1) {
    clear: left;  
  }   
  
}

@media only screen and (min-width:992px) and (max-width:1199px) {
  
  .widget_sydney_services_type_b .service.col-md-4:nth-of-type(4) {
    margin-left: 169px;
  }  
  
}

@media only screen and (min-width:1200px){
  
  .widget_sydney_services_type_b .service.col-md-4:nth-of-type(4) {
    margin-left: 200px;
  }    
  
}

Let me know how it goes.

Regards,
Kharis

Voila!
It works, you’re awesome Kharis!
Thank you for all your help.

Great! I am glad to know it worked for you. :slight_smile:

Regards,
Kharis