Solved

Paste grid-shaped lines

Suco
Tourist
100 0 12

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

I use Refresh Theme 

IMG_2590.jpeg

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

 

pass- Humblee3030

Accepted Solutions (2)

BSSTech-Venture
Shopify Expert
415 101 116

This is an 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: 

BSSTechVenture_0-1715873708038.png

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 😍😍

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSSTech-Venture
Shopify Expert
415 101 116

This is an 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: 

BSSTechVenture_0-1715875854306.png

 

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 😍😍

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 5 (5)

BSSTech-Venture
Shopify Expert
415 101 116

This is an 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: 

BSSTechVenture_0-1715873708038.png

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 😍😍

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Suco
Tourist
100 0 12

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

IMG_2591.jpeg

 thanks for your time 

BSSTech-Venture
Shopify Expert
415 101 116

This is an 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: 

BSSTechVenture_0-1715875854306.png

 

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 😍😍

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Suco
Tourist
100 0 12

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

IMG_2592.jpeg

BSSTech-Venture
Shopify Expert
415 101 116

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: 

BSSTechVenture_0-1715916627763.png

 

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development