Issue with mobil product view

Technical Q&A
, , ,

Topic summary

  • Main issue: On mobile, some product images in the product view appear only half visible (cut off). A Shopify preview link and a screenshot were provided; the image is central to understanding the display problem.

  • Proposed fix: Add a mobile-only CSS rule in the theme. Path: Online Store > Themes > Edit code, then in base.css/theme.css/style.css insert a media query for max-width 768px that sets .product__media-item { margin: 0 30px !important; } to adjust spacing.

  • Rationale: Increasing horizontal margins on product media items may prevent clipping within the mobile viewport and improve image visibility.

  • Status: No confirmation yet that the change resolves the issue. The thread remains open awaiting the original poster’s feedback or further adjustments if needed.

Summarized with AI on December 28. AI used: gpt-5.
2

Hello @Esra47

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css or style.css

Step 3: Add code

@media (max-width: 768px) {
.product__media-item {
   margin: 0 30px !important;
}
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly