Hello,
I have a problem with the mobile product view.
Some images are only displayed halfway, as shown in this example:
Here the link: https://xh3qb6g10wvloizj-71988969740.shopifypreview.com
Is it possible to fix this problem?
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.
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