Paste grid-shaped lines

[Suco]

Hello guys, you know how to say how I make these lines as it is in the image
Thanks 🙏 

I use Refresh Theme 

 

https://492dea-24.myshopify.com/pages/landing-page-apr-25-23-07-50

pass- Humblee3030

[BSSCommerce-HDL · Accepted solution]

Hi  @Suco, Pls insert this code to your file css : 

@media only screen and (max-width: 967px) {
  .collection-list__item.grid__item:nth-child(2n) {
    border-left: 1px solid black !important;
  }

  .collection-list__item.grid__item:nth-child(n + 3) {
    border-top: 1px solid black !important;
  }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[BSSCommerce-HDL · Accepted solution]

Hi  @Suco, Pls insert this code to your file css : 

@media only screen and (max-width: 967px) {
  .collection-list__item.grid__item:nth-child(2n) {
    border-left: 1px solid black !important;
  }

  .collection-list__item.grid__item:nth-child(n + 3) {
    border-top: 1px solid black !important;
  }
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[Suco]

Hello it’s work but , can help whit adjustments like in the image 

 thanks for your time 

[BSSCommerce-HDL · Accepted solution]

Hi @Suco , Pls insert this code to your file css

@media only screen and (max-width: 967px) {
  .collection-list__item.grid__item:nth-child(2n) {
    border-left: 1px solid black !important;
  }

  .collection-list__item.grid__item:nth-child(n + 3) {
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
  }
  .collection-list {
    transform: translateY(-40px) !important;
  }
  .grid:has(.card-wrapper) {
     column-gap: 0 !important;
     row-gap: 0 !important;
  }
  .page-width {
     padding: 0 !important;
  }
}

Here is result: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[Suco]

Hi , thanks so muck the lines is great but , can adjust the icon in header? 
I think the code change alignment 

 

[BSSCommerce-HDL]

Hi @Suco, Pls insert this code to your file css : 

@media only screen and (max-width: 967px) {
   sticky-header.header-wrapper {
    padding: 0 10px !important;
   }
}

Here is result: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍