Good afternoon,

 

I have done this before, but really struggling to get this today... can anyone help?

 

Basically I am running a portfolio plugin on a website and I am trying to change the media query so that the portfolio thumbnail reduces down to 20% width, not 50%. However, I am using this plugins for multiple pages and only want to apply this to one page.

 

My thoughts were I could wrap the portfolio in a div called "client-portfolio" and then apply specific CSS like this example:

 

#client-portfolio .example-class {}

However, I have been getting myself in a muddle - I don't think I am doing it right. Can anyone help? Here is the actual code:

 

@media only screen and (max-width: 959px) and (min-width: 768px){
.gw-gopf-2cols .gw-gopf-col-wrap, .gw-gopf-3cols .gw-gopf-col-wrap, .gw-gopf-4cols .gw-gopf-col-wrap, .gw-gopf-5cols .gw-gopf-col-wrap, .gw-gopf-6cols .gw-gopf-col-wrap, .gw-gopf-7cols .gw-gopf-col-wrap, .gw-gopf-8cols .gw-gopf-col-wrap, .gw-gopf-9cols .gw-gopf-col-wrap, .gw-gopf-10cols .gw-gopf-col-wrap {
width: 50% !important;
}

Live development link here...Thanks in advance :-)

Look here you will probebly find something useful http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Hi Charly, why don't you target the parent div instead.

@media only screen and (max-width: 959px) and (min-width: 768px){
.gw-gopf-post {
	width:50% !important; /*or pixels*/
}

also there's a missing bracket at the end (the one that would close the media query).. check if that's a copy/paste mistake or if is in the code.

Can you not use the page id?