Anyway to show the show the face of this model while still having frame filled up?

Store Design
,

Topic summary

A user is seeking help displaying a model’s face in product images on mobile devices while maintaining the desktop layout and keeping the mobile frame filled.

Proposed Solution:

  • Use CSS media queries to adjust image positioning specifically for mobile screens
  • The suggested code targets screens under 749px width and repositions images to show the top center portion
  • This approach preserves the desktop appearance while optimizing mobile visibility

Technical Implementation:
The solution uses object-position: top center within a media query to shift focus to the upper portion of product images on mobile devices only.

Status: One solution has been offered; no confirmation yet on whether it resolves the issue.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Anyway to show the show the face of this model without changing what it looks like in desktop and while still having the frame on mobile filled up? My url is www.whoglobal.shop

samueljoonjung_0-1740609698882.png
samueljoonjung_0-1740609698882.png2879×1551 342 KB

2

You can actually adjust the mobile image position using CSS without messing up the desktop layout. You’d just tell it to show the top of the image on smaller screens while still letting it cover the frame

@media screen and (max-width: 749px) {
  .product__media img {
    object-position: top center !important;
  }
}