[Resolved] How To Make Featured Image Responsive?

[Brian]

I set the featured image width and height as above for bigger screens.

However, for smaller screens as mobile, how can it be responsive like the Marketeer at Site Library, for examples?

Thank you?

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

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 🙂

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

[Brian]

It works. Thank you very much!

[Leo]

No problem 🙂

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

[Brian]

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.

[Leo]

Sorry are you referring to single posts?

Isn’t it already like that?

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

[Brian]

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?

[Leo]

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 🙂

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

[Brian]

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.

[Brian]

For your reference

Square vs Rectangle

[Leo]

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

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

[Brian]

Still, just the width applied. 🙁

[Leo]

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 🙂

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

[Leo]

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

Then I can provide the mobile specific CSS to overwrite it 🙂

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

[Author]

Posts