Add line in between products in cards

[TrendBlend]

Hello, I'm trying to add a horizontal line in between products in my card drawer, so I added this code:

{%- unless forloop.last -%}
<tr>
  <td>
    <hr style="border: 1px solid red !important; width: 100%; margin: 10px 0;">
  </td>
</tr>
{%- endunless -%}

But it just adds a red . in between the products and not a full line like the default top and bottom horizontal line. Does anyone know how I can show a horizontal line there?

[websensepro]

Hi  @TrendBlend , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[websensepro]

Hi @TrendBlend 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file

.cart-drawer .cart-item {
    border-bottom: 1px solid gray;
    padding-bottom: 22px;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[DaisyVo]

Hi  @TrendBlend 

Please share your store URL 

Best,

Daisy

[TrendBlend]

@DaisyVo @websensepro URL: Wall Art – Transform Your Space with Style and Elegance – InteriorGlows

[Moeed]

Hey @TrendBlend 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.cart-drawer .cart-item {
    border-bottom: solid 1px black !important;
    padding-bottom: 20px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[websensepro]

@TrendBlend Give the width in vw instead of %. For example, width:100vw;

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[TrendBlend]

Hello @websensepro , this code makes my card horizontally scrollable which I absolutely do not want.
Hello @Moeed the code you provided also adds a horizontal line under the last cart item which I do not want since there is already a horizontal line under it aswell for the footer.

[websensepro · Accepted solution]

@TrendBlend 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.cart-drawer .cart-item {
    border-bottom: 1px solid gray !important;
    padding-bottom: 20px !important;
}
.cart-drawer .cart-item:last-child {
    border-bottom: none !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!