Portfolio Featured Image Size

I need to reduce the size of the portfolio post featured images. I found a couple of posts that had css for that, but they did not work for me. Can you help?

Thank you!

Hi there,

I guess you mean in the Single Portfolio pages. Our theme does not have a built-in option for that, but you can achieve something similar with custom CSS coding.

Please kindly add the code below to X > Launch > Options > CSS:

.single-x-portfolio .entry-featured {
	width: 75%;
    margin: auto;
}

For the future reference, I used the Google Chrome developer toolbar to inspect the element in question to be able to select the proper class name. FOr more information:

Also please consider that X theme has helper classes on the body tag to determine which page is viewing at the moment.

I used the single-x-portfolio class there which will make sure that the code will operate only on portfolio single pages. And finally, the entry-featured class is the one responsible for the image container.

I limited the width of that container to 75% in the code, but you can change to your liking, also the margin: auto; section of the code is to make sure the container will stay at the center horizontally.

Thank you.

1 Like

Hi, Christopher!

Unfortunately, that did not work. I think that is one of the ones I tried already that I found from searching the forum. The images are still huge, as you can see here. http://3ed.1cd.myftpupload.com/portfolio-item/north-caddo-medical-center/

Hi there,

The suggested code is not applied to that page anywhere. You will need to make sure that you add the code to the correct section as I explained and if you have any kind of cache plugin installed, make sure that you purge all caches.

If you still have problems kindly get back to us with the URL/User/Pass of your website using the Secure Note functionality of the theme to follow up.

Thank you.

Christopher -

The code IS in the Global CSS area, and my site credentials are in a secure note in the first post of this thread. I’m confused as to why you cannot see them?

Adding a screenshot of your code and the additional code that pertains to the portfolio pages, in case there is a conflict somewhere.

Hi There,

Please change the previous CSS to this:

}
.single-x-portfolio .entry-featured {
	width: 75%;
    margin: auto;
}

That did it. Thank you!

You’re welcome!

Hi. This code was very useful for us too.

Many thanks!

Glad to hear that, @DigitalTrustBuilders.

I’d just like to add here that you don’t need custom code as we now have the Layout Builder for Pro. You can learn more here https://theme.co/docs/layout-builder-overview