Hi there,
I am looking to add a thin black border around product images in a grid and the text description card below them. The same for Collections in a grid as well.
I found out how to put a border around just the image, but I would like the border to go around not just the image, but the image and the white card below it. Please see reference image. Thank you!
Hi @leighmarino
can you share with me the page url
Sure, it’s machineartmoto.myshopify.com
password: seigao
I’m Richard Nguyen from PageFly- Free Landing Page Builder
You can try with this code.
Follow this:
Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file
.card-wrapper {
padding: 15px;
}
.card-wrapper.underline-links-hover{
border: 3px solid #3333337a;
}
.card-wrapper .card__inner {
border: 2px solid #333;
}
Hope that my solution works for you.
Best regards,
Richard | PageFly
Hi,
I’m sorry, but that didn’t do anything that I can see. Any other suggestions?
Thanks,
Leigh
Hello @leighmarino
Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.
.card-wrapper.underline-links-hover {
border-width: thin;
border-style: groove;
}
.card-wrapper {
padding: 22px;
}
Still nothing. hmmm.
I added that code in addition to the code you already sent and it did nothing. So I removed the original code you sent and tried just the second code and still, nothing.
Hello Again @leighmarino
Do want it like this - on this Page?
https://machineartmoto.myshopify.com/collections/r1200-1250-gs-a
Yes please.
Hello Again @leighmarino
Go to Online Store->Theme->Edit code->base.css ->Add code at the bottom.
.card--card, .card--standard .card__inner {
padding: 22px;
border: groove;
border-width: thin;
}
Is this in addition to all of the other code you’ve already suggested or just this code by itself?
I added just this code at the bottom by itself and it didn’t do anything. I’m not understanding why nothing is working…
You can try again with this code.
Follow this:
Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag
.card-wrapper { padding: 15px; } .card-wrapper.underline-links-hover{ border: 3px solid #3333337a; } .card-wrapper .card__inner { border: 2px solid #333; }We’re getting closer. There is now a border (can it be thinner?) around the products and text, however it is also adding a black border around the images:
It did not work correctly for the collections on the home page - it added a border around the images instead:
Wonderful, thank you! You are the best.
You are welcome @leighmarino 
Hi. I have tired all of the codes, but non of them work. I use the Focal theme. Can you help me?
