How To Make Featured Image Responsive?

Hi there,

Featured image is responsive by default.

Marketer is using this specific CSS to set the width on desktop:

@media (min-width: 769px) {
    .post-image-aligned-left .post-image img {
        max-width: 300px;
        max-height: 300px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

It works. Thank you very much!

No problem :)

I have another question, please.

How can I have my featured images cropped to almost squared on homepage / archives when in bigger screens, but responsively rectangle in single post or smaller screens?

For examples: Featured Images

Thank you.

Sorry are you referring to single posts?

Isn't it already like that?

Sorry for the misleading. I have updated the question.

How can I have my featured images cropped to almost squared on homepage / archives when in bigger screens, but responsively rectangle in single post or smaller screens?

The CSS I provided above is wrapped with @media (min-width: 769px) so it will only crop the image on desktop.

On mobile the image is currently uncropped and maintain the original ratio when resizing down so it's already in rectangle shape:
https://www.screencast.com/t/Kj2s2MLc

It's just hard to tell because your original image is not very rectangle to start with:

https://kiemtien101.com/wp-content/uploads/2018/09/coffee-cup.jpg

Let me know if this helps :)

I know it will only crop the image on desktop. My question is how to make that cropped image square, on desktop obviously.

Because I have to use not-very-rectangle images. That's only way at the moment to make the cropped images look square. If I use rectangles ones, I get rectangle crops.

For your reference

Square vs Rectangle

Try the edited CSS: https://generatepress.com/forums/topic/how-to-make-featured-image-responsive/#post-704360

Still, just the width applied. :(

It is applied. Except that the height is already at 210px so falls under max-height: 280px;.

If you want to be this specific then it's probably better to remove the CSS then use the customizer option instead:
https://docs.generatepress.com/article/adjusting-the-featured-images/

Then we can overwrite it with CSS on mobile. Let me know once the customizer options are set :)

Let me know once you've set the squares up on desktop.

Then I can provide the mobile specific CSS to overwrite it :)