Solved

Take Away Boarder Outline on Main Product Page Photo

babystore123
Excursionist
54 1 3

Please help with how to remove this outline on mobile & desktop around main photo only product page.

Screenshot 2024-04-07 at 11.52.50 PM.png

Accepted Solution (1)

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@babystore123 Please follow below steps to remove the border from main product image. Let me know whether it is helpful for you.
 
1. From admin, go to "Online Store" -> "Themes" -> "Customize".
2. Go to product page.
3. Click "Product information" section and paste the below code in "Custom CSS" field.

 

.product .product-media-container {
    border: none !important;
}

 

Vinsinfo_3-1712579107915.png  Vinsinfo_7-1712579153246.png

 

Result will be, 

Vinsinfo_1-1712578913991.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 8 (8)

suyash1
Shopify Partner
9260 1151 1495

@babystore123 - can you please share this page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
babystore123
Excursionist
54 1 3
suyash1
Shopify Partner
9260 1151 1495

@babystore123 - please add this css to the very end of your base.css file and check

.global-media-settings{border: none;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
babystore123
Excursionist
54 1 3

Yes! But not on mobile 😞

Dan-From-Ryviu
Shopify Partner
7726 1504 1511

Please add this code at the bottom of your base.css file 

.product-media-container.constrain-height.media-fit-contain {
border: unset !important;
}

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

babystore123
Excursionist
54 1 3

Doesn't work for mobile for some reason 😞

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@babystore123 Please follow below steps to remove the border from main product image. Let me know whether it is helpful for you.
 
1. From admin, go to "Online Store" -> "Themes" -> "Customize".
2. Go to product page.
3. Click "Product information" section and paste the below code in "Custom CSS" field.

 

.product .product-media-container {
    border: none !important;
}

 

Vinsinfo_3-1712579107915.png  Vinsinfo_7-1712579153246.png

 

Result will be, 

Vinsinfo_1-1712578913991.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
babystore123
Excursionist
54 1 3

Worked! Thank you so much!!!