Featured Image not scaling with device / viewport size

Thanks for using Chosen!

Could you share a link to an example where this is happening?

Hi Ben,

Here is an example:

https://nedswish.com/blog/retired-heroes/gemma/

If you shrink down your browser window really small, you lose almost half the image. I would expect the image to take up 100% width of the browser window / device view port if possible.

I tried to do some custom CSS with media queries with no avail – I am mostly doing something wrong.

Thank you for looking into this!

Thanks!

The issue is coming from this Custom CSS:

.featured-image {
  height: 1000px;
  padding-bottom: 0;
}

This is making the Featured Images unresponsive by forcing them to be 1000px tall at all times. If you remove that code, they will shrink with the screen and keep the image uncropped.

Hi Ben

I took that off and the width works with the device view port now.
However, I did notice another issue. For some featured images, like this one:
https://nedswish.com/blog/retired-heroes/taz-regimental-1002/
It is cut off on the both sides, I’ve tried cropping the image on photoshop to try to confine the size to the theme with no avail, I’ve tried to modify the crop position too.

Please advise. Thank you for your continued patience with me.

The Featured Images are usually given a 2:1 aspect ratio, so they will get cropped vertically or horizontally if the image doesn’t fit those dimensions. However, you can change this behavior with the following code:

.singular .featured-image {
  padding-bottom: 0;
  height: auto;
}
.singular .featured-image img {
  position: static;
}

That will allow the Featured Images to display the image at whatever its natural resolution is, so that it doesn’t get cropped.

You may need to remove this custom CSS added to the site as well for it to work properly:

.featured-image {
  padding-bottom: 200%;
}

Hi Ben

Thank you so much for the code! It works now!

Marking this as resolved!

Thanks again!

You’re welcome!

Stay in touch if you need anything else, and I’ll be happy to help.