Portfolio, several number of columns

Hello everybody,

I use portfolio widget on my website. For now, I use it with some custom CSS because i wanted 5 columns and bring some CSS text modification. I have currently this custom CSS and it works perfectly.
Link of the page : http://chauffage-geneve.ch/chauffage/

.portfolio-section.style2 .portfolio-item h4 a {
  color: #fff;
  background-color: #e31e24;
  border-bottom-color: #fff;
}
	
.portfolio-section.style2 h4 a:before {
 background-color: #fff;
} 

What the issue ?

Now, I would like to use portfolio widget on another page but I want only 2 columns and blue background text color. For now, I can’t bring any modification on my custom CSS because it will change the display of the previous page. So I need to bring specfic modification for each page.
Link of the page : http://chauffage-geneve.ch/ventilation/

Could you help me please to do this ? Thank you so much. Seb :slight_smile:

Hello there,

To apply CSS code for specific page, you can use page ID selector name which is attributed to the body tag. For example:

.page-id-27 .portfolio-section.style2 .portfolio-item h4 a {
  color: #fff;
  background-color: #e31e24;
  border-bottom-color: #fff;
}

You can find the ID number (27) with a plugin like Reveal IDs. Or edit the desired page and see the URL address shown in the address bar of your web browser. It usually reads like yoursite.com/wp-admin/post.php?post=27&action=edit

Regards,
Kharis

Hello Kharis,

Thank you very much for the quick answer. It works :+1:

How can I centred the two colums on my page ?

For your information, I currently have this custom CSS code applied :

@media only screen and (min-width:1200px ) {
      .portfolio-section .portfolio-item {
        width: 20% !important;
      }  
    } 

Thank you very much :slight_smile: Seb