[Resolved] Need help with sizing of featured images on mobile

[Earl]

This request refers to featured images on individual posts. My featured images are all displaying correctly on the blog (masonry grid) home page but PC and mobile displays are displaying quite differently due to cropping.

I need to control how featured images are displayed on a mobile device. Because of the tall and narrow aspect of the screen when held vertically, the images are often cropped left and right, usually with disappointing results. In one instance, I used a square graphic, which displays as a square on a PC screen, but shows pretty extreme cropping on mobile. Since the graphic had a lot of text, the text was rendered unreadable. View the post in the URL provided to see what I mean. What’s the best way to handle the very different aspect ratios of desktop vs. mobile displays?

[Tom]

Hi there,

Right now you’re using the width and height fields in the Customizer, which uses CSS to resize the image.

Instead of that method, you should create your own image size: https://docs.generatepress.com/article/adding-image-sizes/

Then choose that image size as the Media Attachment Size in the Customizer, and remove the width/height from your settings.

Hope this helps 🙂

[Earl]

Excellent! Thank you for the quick response. This is exactly what I needed.

[Tom]

Glad I could help! 🙂

[Author]

Posts