Post-card-images of the website is not coming correctly

Hello, I am using Casper 3.1.1. On the website, the post-card image is not showing correctly. Here is the photo of that.

The whole image which we wanted to come is not coming correctly. I used console to see the solutions. I got that if I remove object-fit: cover; height: 200px; from the .post-card-image in screen.css the issue will be solved. I did that uploaded the modified version. But, when I am posting again and seeing the console then both the attributes is still there and the image is creating the same problem. Please help.

Abhishek Agrawal

Are you using the default installation of Casper?

One thing that can help you trouble shoot is do like you did with the console, but then make adjustments in the “inject code” area of Ghost Admin. Then you don’t need to go back and forth uploading versions.

So I usually find the particular CSS in the console, then inject my changes in the ghost admin to see how it plays. Then I can go into the template later and put in the fix – but often I just leave it in the admin code injection. (I’m not sure if that’s best practice but that’s what I do).

But what might be causing your particular problem is related to the fact that Casper uses responsive image sizes. So if you’ve hard coded in a change, it could be getting messed up because it can no longer be responsive