Resizing Feature Image on Post / Page

Developer help
1

Hello all,

I’m sure this is a simple answer, but for the life of me, I can’t figure out how to resize feature images on posts / pages. I did search before posting.

I have some of the code:

.featured-post-image { }

and I can use this to successfully hide the image, like so:

.featured-post-image { display: none; }

But I can’t, for example, halve the size of the image.

Any help is much appreciated.

2

well, you probably want to set width and/or height. (Or maybe max-width and/or max-height.) Can you link the site, or at least a demo of the theme you’re using? The settings needed will vary a bit.

1 Like
3

I’ve tried various combos of those, but I may be mangling them.

I’m using the Arate theme. https://arate.fueko.net/

4

Did you want something like this?

image
image1018×632 83.9 KB

You may need an !important on one or more of the properties below.

.featured-post-image {
    width: 50%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;

Looks like you also need:

@media (max-width: 479px) {
.featured-post-image {
    width: auto;
}
}

There might be an additional breakpoint in the theme - you’ll have to play around with various sizes to figure out if you need an additional rule.

1 Like
5

Eureka.

Sincere thanks, Cathy. Most appreciated.

1 Like