Hello,
i would like to remove the border around the product pictures.
I am using the Brooklyn theme.
Usually they are grey but i colored them blue for better visual understanding.
I know that I can change to color to white but the padding top and bottom will change when the resolution is changed which I would like to fix.
Thank you!
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
The URL is https://boxifique.com/
Thanks for any help.
Please add the following code at the bottom of your assets/theme.scss.liquid file.
.grid-product__image-link{
border: none !important;
}
Hope this helps.
Thanks!
sorry i left the dark blue border for testing purposes. i try to remove the “product-background” which is light blue in this case
Then try the following code:
.grid-product__image-link{
background-color: transparent !important;
}
Thanks!
Yes that changes the background but i would like to entirely remove it, because of the large space between the image and the text
Please try the following code:
.grid-product__image-wrapper {
height: auto !important;
}
Thanks!
This does seem to work on larger resolutions as the blue part is gone, but for instance in phone view the blue parts will appear again.
I checked on a mobile device. It is working no blue color. I will check more and get back to you.
Thanks!
For other testing purposes i replaced the blue frame with a transparent background.
I put it there again now. Thus the border still shows for smaller resolutions.
Sorry for the inconvinience and thanks for the help so far.
No problem. I got that on mobile. You can try the following code:
@media screen and (max-width: 590px){
.product--wrapper { margin: 0px auto !important; }
}
Thanks!
Thanks a lot!
You are a saint.
Hello !!!
This code worked for me partially.
I mean, the top and bottom border were deleted but the left and right border remain the same.
Any additional code would be missing to let me know please?
Thank you in advance for your help!
best regards
tony