Paste grid-shaped lines

Solved

Paste grid-shaped lines

Suco
Explorer
117 0 14

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)

BSSCommerce-HDL
Shopify Partner
1142 394 460

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1142 394 460

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

BSSCommerce-HDL
Shopify Partner
1142 394 460

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Suco
Explorer
117 0 14

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

IMG_2591.jpeg

 thanks for your time 

BSSCommerce-HDL
Shopify Partner
1142 394 460

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Suco
Explorer
117 0 14

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

IMG_2592.jpeg

BSSCommerce-HDL
Shopify Partner
1142 394 460

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency