Add border around each product tile

[cardboardhouse]

Hey folks,

I was wondering if someone could help me add a border around the product tiles which would be visible on all pages.

The look would be like the below (just the border and shadow effect)

I'm on the enterprise theme, thanks a lot!

[cardboardhouse]

Sorry it didn't do anything 😞

[BiDeal-Discount · Accepted solution]

Hi @cardboardhouse 

let try to add this custom css to your file main.css:

product-card.card {
  border: 1px solid rgba(var(--text-color) / .15);
    box-shadow: 0px 1px 6px rgba(var(--text-color) / .15);
    padding: 6px 9px;
}

 the result will be:

[cardboardhouse]

You are too good 🤣 - Thanks a lot!

Do you know how I can increase the size of the cards and actually everything on the page? it seems too bunched togther

[BiDeal-Discount]

Yes I'm still here 😂

---

@cardboardhouse wrote:

You are too good 🤣 - Thanks a lot!

Do you know how I can increase the size of the cards and actually everything on the page? it seems too bunched togther

---

can you detail this will a screenshot?

[cardboardhouse]

All good, I fixed it myself - Thanks!

[BiDeal-Discount]

Okay. Let me know if you need support

[cardboardhouse]

Thank you! Do you know how to add a bottom border just on mobile layout? Like below - The divider should only stretch the length of the box item, not from the full edge to edge

[BiDeal-Discount]

let try this css:

@media screen and (max-width: 599px) {
  .shopify-section-group-footer-group ul.slider__grid li:not(:last-child) {
    position: relative;
  }
  .shopify-section-group-footer-group
    ul.slider__grid
    li:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(var(--scrollbar-color, 60 60 60));
  }
}

[cardboardhouse]

Didn't work 😞 - Nothing shows

[BiDeal-Discount]

which file did you add that css code? I don't see it on storefront source