Hi,
I would like to see if i can remove the border around my product images in my product info.
So when i go on shop, click on a hoodie, and then it takes me to the hoodie page(Product information). There is a border around my images and i want to remove this border and add a feature where the product glows.
Can anyone help?
Password: GeffDoe
Hi @abalves97
Try this one.
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
border: none !important;
}
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi,
This did not work
Please try the code again I replace, sorry I paste the other code that I just trying. Thanks!
Hi,
It semi worked. The code managed to remove the border around the main picture, but not around the smaller pictures below the main picture.
Do you know how to remove the border from the smaller pictures?
Oh, Okay you what it to remove also. When you choose an image it will have a border. You want it to remove also?
Try this one to remove the thumbnail border.
Same instruction.
button.thumbnail.global-media-settings.global-media-settings--no-shadow {
border: none !important;
}
And Save.
Result:
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hello! the edges of the photo(on product page) is also driving me crazy, implemented whatever you offered nothing works. Can you help?
Im sorry I didnt get what your asking for? This code is only for the post owner. This is not universal code, it may work on other theme but not all the theme. Can you please more specify? And share your store URL? Thanks!
Could you help me with a similar issue? The image block in the collage section has a border around it but only with some images. I have tried modifying the base.css and the component-card.css but it hasn’t helped.
Can you share the store URL? thanks!
Are you still able to help?
Thanks for the info, but where can I find this collection? can you share the exact page of the image thave you share? Thanks!
https://3c8be1-91.myshopify.com/collections/the-cubans
https://3c8be1-91.myshopify.com/collections/the-chains
https://3c8be1-91.myshopify.com/pages/mabel-and-pearl
These are all the pages where the problem occurs.
Did you see my reply?
Hello,
Sorry i didnt notice your reply, just now. Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collage-card.global-media-settings {
border: 0 !important;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you that fixed it. How would I change the code to fix the same issue, but on the product page. It only shows up in the mobile view.
Sorry to be bug, but I have just one more issue. I’m not sure if you saw my previous reply but the same boarder shows up around the all the product images but only in the mobile view. I am attaching a photo of the issue along with the code that has already been added to the base.css.
Check this one, same instruction.
@media only screen and (max-width: 749px){
.product-media-container.media-type-image.media-fit-contain.global-media-settings {
border: none !important;
}
}
And Save.
Also i check yout base.css file via inspect looks like your missing 1 closin bracket on thhis side.
And 1 closing bracket like image below.
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
I fixed both thank you!
