Formatting Portfolio index

[KimAnn]

Hello-

How can I get the images on the portfolio index page to be the same size and also centered in the column?
https://dev.thecosmicpath.com/cosmic-consciousness-corner/

Thank you

[ruenel]

Hello @KimAnn,

Thanks for writing in!

I can see that you have added this custom CSS to set a maximum width of the featured images:

.entry-featured .entry-thumb {
    max-width: 23%;
}

You can also add a code to set the left and right margin to auto so that the image will be at the center. You can also set a maximum height for the images to have a uniform image sizes. Just set the overflow to hidden.

• https://www.w3schools.com/css/css_margin.asp
• https://www.w3schools.com/cssref/pr_dim_max-height.asp
• https://www.w3schools.com/cssref/pr_pos_overflow.asp

And by the way, please check the suggested step #2 on this thread: Portfolio Sort not working, to resolve the current issue in your portfolio page.

Kindly let us know how it goes.

[KimAnn]

Hello-

I need to handle the entry feature size for portfolio individually from the sitewide entry feature. I need different sizes for the portfolio than for the rest of the site, is this possible?

Thanks- Kim

[marc_a]

Hey Kim,

You can use the CSS selector below to only edit the size of your portfolio entry images.

.page-template-template-layout-portfolio .entry-featured .entry-thumb {
    // your css code here
}

Hope that helps.

[KimAnn]

Thank you for that- I am very close to my desired outcome. So far i have:

.page-template-template-layout-portfolio .entry-featured .entry-thumb {
display: block;
margin: 0 auto;
padding: 0px 0;
overflow: hidden;
margin-right: auto;
margin-left: auto;
max-width: 222px;
max-height:222px;
}

Is there a way to have it so that the image doens’t ever get cut off?

https://dev.thecosmicpath.com/cosmic-consciousness-corner/

[marc_a]

Hey Kim,

Since you set the max-height, max-width, and overflow on the image container, there’s no way that the image will fit within the image container, this approach is applicable if you are using a background image. You can customize your portfolio page using a Layout Builder and then redesign the content to use a background image instead of using the image tag. But this option is only available using Pro. Here’s a quick overview.

• https://theme.co/docs/layout-builder-overview
• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/search?query=layout%20builder

Or you can resize the entry image using an image cropping tool like photoshop and then manually edit them with 222px width and 222px height.

Hope that helps.