Mobile responsive post images

[Arberoo]

Hello,

How can I make the post images in the liebling theme mobile responsive? Right now they look very good on desktop, but if you open a blogpost on mobile, the image gets cut off really bad (example: https://blog.cakedefi.com/transparency-report-q1-2021-2/)

Would really appreciate some help on this, as I tried out many different things already but they didn't quite work.

[eddiesigner]

Hi,

the featured image is responsive actually but the idea is to keep a consistent height no matter what the images height is, to achieve that the theme applies some styles that keep the aspect ratio consistent, that means if you image is wider than the device width then some parts will be cropped, this is in general no an issue because the featured image is there only for presentational purposes, you shouldn’t include important content in that image.

A quick way to show the full image is by injecting the following styles in the Ghost Admin (Settings -> Code injection -> Site Header):

<style>
.post-template .m-hero.with-picture {
  min-height: 0 !important;
  padding: 50px 0 0;
}

.post-template .m-hero__picture {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
}

.post-template .m-hero__picture img {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 48rem) {
  .post-template .m-hero.with-picture {
    padding: 67px 0 0;
  }
}
</style>

[Arberoo]

That worked like a charme! Thank you :)