Mobile home page cover image optimization

Themes
1

My homepage cover image looks great on desktop but not on mobile.

CleanShot 2024-01-06 at 11.24.24
CleanShot 2024-01-06 at 11.24.241904×908 52.6 KB

How do I make the image crop or align differently on mobile? I think it would be enough if the image would center on mobile or resize.

2

Mobile:

CleanShot 2024-01-06 at 11.24.53
CleanShot 2024-01-06 at 11.24.53520×908 246 KB

3

Assuming you are using the Edition theme, you can try adding the following in Code injection:

<style>
@media only screen and (max-width: 600px) { 
  .cover-image { object-position: left; } 
}
</style>
4

Yes, the Edition theme. The code did this:

CleanShot 2024-01-06 at 12.54.03
CleanShot 2024-01-06 at 12.54.03489×912 226 KB

5

You are not in the center of the image and without a link to see it live, it’s hard to suggest meaningful values for the object-position property. You can play around with the object-position attribute to find a suitable value:

6

Thanks for the link. I played around with a bit and was able to move the head into the viewport but I can’t seem to move the image higher up… https://ghost8943234.pikapod.net/

I tried:

<style>
@media only screen and (max-width: 600px) { 
  .cover-image { object-position: 25% -20%; } 
}
</style>

Then I tried

<style>
@media only screen and (max-width: 600px) { 
  .cover-image { object-position: 25% -100px; } 
}
</style>

But then it moves the image up and below there is a gray box :(