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
6

Hey @Cathy_Sarisky !

I needed a similar help in case of Solo theme, I have been trying a lot around this but couldn’t fetch up the expected results.

I want to have a white as my site’s primary background color. Meanwhile, for blogs I want to blend it with a slightly not noticeable darker shade, the place of this breakpoint would in between that post’s feature image.
This reference perfectly demonstrates what I am trying for: How to Scale, Crop, Flip & Filter an Image in CSS | IMG.LY Blog

Thank you, and I hope there is something that can be done.

7

I can’t tell from your link (which is about half broken?) what you’re trying to do. If you want help, post a specific example (what part of that page??) and what you’ve already tried.

1 Like
8

Thanks for the reply, @Cathy_Sarisky.
With regards to the specific part of the example from the previous link here is the image (suggested to increase the brightness):

image
image986×573 66.7 KB

This is what I am trying to replicate using the Solo theme by having a separate color for the site’s background and different color for the article/post but the breakeven is what I am needed in-between the cover/feature image.
Let me know if I could provide more information.

9

When I look at the Solo theme, I don’t see HTML that I could easily target with “color-changing” CSS injection. Probably you could do something like adding a gray background to the image, and then offsetting it half way down the page. You could do it more easily if there were more elements in the header (top_header and bottom_header), but I only see header, h1, and figure, and img. You could also add more elements by modifying the theme.

1 Like
10

Thanks for the input, @Michael_McGinnis.
I will try and experiment to check how much feasible it could be.