Changing the column settings on the home page "services" widget

Hi guys,

I am struggling a little with the settings of the services and how to adjust their column width, I can’t find where I can set it to having 5 or 6 columns per row on the front page. link below

Current website
And also I would like to maintain a 3 column per row display on my services page like this: http://demo.athemes.com/sydney/services/

Thanks for your help and all your hard work already on getting this great theme for us to share.

Pierre

Hello there,

To change the default columns of the Services Type A widget, assign a custom class name through edit widget > Widget Styles > Attributes > Widget Class. Enter:


custom-column-services

or any class name of your choice. And then apply the below custom CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).


@media only screen and (min-width:992px) {
  
  .sydney_services_widget .custom-column-services .service.col-md-4:nth-of-type(3n+1) {
     clear: unset
  } 
    
  .sydney_services_widget .custom-column-services .service.col-md-4:nth-of-type(5n+1) {
     clear: left;
  } 
  
  .sydney_services_widget .custom-column-services .service.col-md-4 {
     width: 20%;
  }
  
}

The code above will produce 5 column (20% of container width). To make it becomes 6, use this code:


@media only screen and (min-width:992px) {
  
  .sydney_services_widget .custom-column-services .service.col-md-4:nth-of-type(3n+1) {
     clear: unset
  } 
    
  .sydney_services_widget .custom-column-services .service.col-md-4:nth-of-type(6n+1) {
     clear: left;
  } 
  
  .sydney_services_widget .custom-column-services .service.col-md-4 {
     width: 16.666666666666667%;
  }
  
}


http://demo.athemes.com/sydney/services/ isn’t a page. It’s actually an archive page which is instantly created once Services post type be found after the Sydney Toolbox is installed. To access it from your site, use this: http://www.ghltreeservices.co.uk/services. To create its link in your site’s main menu, in the menu administration panel (Appearance > Menus), use Custom Links menu type.

Regards,
Kharis