How to adjust product page image to focus on top?

[samueljoonjung]

For the product page, I want the mobile version to show the top parts of the photo so you can see the faces. It looks good on desktop. But on mobile, if i use the full body shot then it looks awkward because then there is a whole bunch of white space. So what I want to do is to have it be full on mobile like I already have but instead of focusing on the center, it focuses on the top so it shows the face. Is there anyway to do this? My url is www.whoglobal.shop. Any help would mean a lot!

Desktop:

Mobile:

*Good because it fills the whole frame but bad because it doesn't show face.

Bad because it doesn't fill the whole frame

[ToolboxStudio]

Hi,  You can try adding a focal point to the image.  Go to your dashboard - Products.  Click the image of the product you want to add a focal point to. Let me know if that works.

[samueljoonjung]

This didn't work

[ToolboxStudio]

Try - Desktop media width "SMALL" with  media fit "FILL"

[samueljoonjung]

Didn't work

[ToolboxStudio]

Hi,
You can try the following code in the css section.

@media only screen and (max-width: 749px){
.product-media-container .media {
padding-top: 75% !important;
}
}