Please help with how to remove this outline on mobile & desktop around main photo only product page.
Topic summary
A Shopify store owner needed to remove the border outline appearing around the main product image on both mobile and desktop views.
Initial Solutions:
- Early CSS suggestions targeting
.global-media-settingsand.product-media-containerworked on desktop but failed on mobile devices.
Working Solution:
The issue was resolved by adding custom CSS through the Shopify theme customizer:
- Navigate to Online Store → Themes → Customize
- Access the product page
- Click “Product information” section
- Paste the following code in the “Custom CSS” field:
.product .product-media-container {
border: none !important;
}
This approach successfully removed the border on both mobile and desktop platforms. The solution was confirmed working by the original poster.
1 Like
@babystore123 - can you please share this page link?
Here is a product page: https://babybliss.co/products/silicone-suction-plate
@babystore123 - please add this css to the very end of your base.css file and check
.global-media-settings{border: none;}
Yes! But not on mobile 
Please add this code at the bottom of your base.css file
.product-media-container.constrain-height.media-fit-contain {
border: unset !important;
}
Doesn’t work for mobile for some reason
@babystore123 Please follow below steps to remove the border from main product image. Let me know whether it is helpful for you.
- From admin, go to “Online Store” → “Themes” → “Customize”.
- Go to product page.
- Click “Product information” section and paste the below code in “Custom CSS” field.
.product .product-media-container {
border: none !important;
}
Result will be,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Worked! Thank you so much!!!