Portfolio / Single Portfolio Page Image Resizing

[Dfoster]

Hi, this is the web developer of Think Wear Act.

I am trying to resize the image of a single portfolio item. By the way, I am using portfolio feature as a dummy page for products page because I need to integrate it with a 3rd party website. I successfully resized the image on the single portfolio page (http://www.thinkwearact.com/products/this-is-a-test-product/) However, the thumbnail entries are also affected at the main portfolio page (/products). I also want to make the image on mobile view to be responsive.

This is my current global CSS for this customization.

/* For the test product page */
.x-portfolio .entry-thumb img {
display: block;
margin: auto;
min-width: initial;
max-width: 500px;
}

/* Tried to Use this one to fix portfolio page (products)
.page-id-42 .x-portfolio .entry-thumb img {
margin: none;
display: block;
min-width: none;
max-width: none; /* change this to your preferred maximum width*/
}
*/

.x-colophon.bottom {

background-color: #181818;

}
/Attempting to make it responsive but doesn’t work/
@media only screen and (max-width: 400) {

.entry-thumb img {

min-width: initial !important;
max-width: 250px !important; /* change this to your preferred maximum width*/

}

}

Thanks.

[mldarshana]

Hi there,

Thanks for writing in! To target single portfolio pages, use the class single-x-portfolio.

Example:

.single-x-portfolio .entry-thumb {
  // your css here
}

Hope that helps.

[Dfoster]

Hi, Thank you for your assistance! We are using xPro. Apparently, I cannot resize the image using the classes you provided.

I am currently using this code to resize the image for single portfolio page:

.x-portfolio .entry-thumb img {
display: block;
margin: auto;
min-width: initial;
max-width: 500px;
}

[Dfoster]

Hi, it’s now working. I think the problem here is just the preview in Customize page. Thanks!

[paul.r]

You’re welcome!