Adjust featured image size

Hi,

I found out a way to (partially) get the desired results. Now I'd like to know how can I adjust the CSS to apply to all screen sizes? The problem below is that I am using "height:380px" and because of that I cannot use it to smaller screen sizes (only to 1190px and above).

@media (min-width: 1190px) {
.post-image-below-header.post-image-aligned-center .inside-article .featured-image {
width:auto;
height:380px;
overflow: hidden;
}
.single-post .featured-image img, .single-post .post-image img {
width:100%;
}
}

I'm not sure I fully understand - what about that CSS do you want to apply to all screens?

Hi Tom,

My featured images are around 620x300 px, and I need to enlarge them to fit the full width in the featured image area. So I used this CSS:

.single-post .featured-image img {
width:100%;
}

But as they have different heights, I wanted to adjust to make all looking with the same aspect ratio, on both desktop and mobile.

You could try setting a fixed height:

.single-post .featured-image img {
    width:100%;
    height: 200px;
}

It doesn't work on mobile :(

Actually not seeing the CSS being added.

Can you disable your caching plugin?

Please use the dev website

Hmm still don't see the CSS being added.

Only seeing this:
https://www.screencast.com/t/H5pVQTeI0L

Any chance you can disable the caching plugin so I can see the source better?

Thanks :)

Can you check again please?

max-height won't work as that's maximum value it will go to. So if your image is only 339px in height, it will only go to 339px.

If you want to use a fixed height, then you will need to use height instead.

You will see that it wouldn't be able to keep the original ratio.

max-height is an attempt to crop the taller images so they can all look similar. As you can see, the max-height is applied to the overflow container.

.single-post .featured-image {
height: 400px;
overflow: hidden;
max-width: 800px;
}

Sorry maybe I'm still confused what the end result is supposed to be.

So you are saying that this CSS:

.single-post .featured-image {
    height: 400px;
    overflow: hidden;
    max-width: 800px;
}

Does not apply to mobile?

Can you link me to the dev site again?

http://bit.ly/2KqnE

So what is the issue currently?

I do see this CSS being applied on mobile:
https://www.screencast.com/t/i4Fnc5Xkfj

Hi Leo,

There is no effect having a max-height 400px on mobile as the images are much shorter than that