Paste grid-shaped lines

Store Design
, ,

Topic summary

A user working with the Refresh theme on Shopify seeks help creating grid-shaped dividing lines between collection items on mobile, similar to a reference image they provided.

Solution provided:
A support representative shares CSS code that:

  • Adds vertical borders between columns using nth-child(2n) selector
  • Adds horizontal borders between rows using nth-child(n + 3) selector
  • Applies borders only on mobile screens (max-width: 967px)

Additional adjustments:

  • Removes gaps between grid items by setting column-gap and row-gap to 0
  • Adds bottom borders for complete grid appearance
  • Adjusts vertical positioning with translateY(-40px)
  • Fixes header icon alignment by adding padding to .sticky-header.header-wrapper

The solution involves multiple CSS snippets that progressively refine the layout based on the user’s feedback and additional screenshots. Each code modification is accompanied by result images showing the implementation.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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

I use Refresh Theme

IMG_2590.jpeg
IMG_2590.jpeg1170×2532 231 KB

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

pass- Humblee3030

2

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
BSSTechVenture_0-1715873708038.png1919×787 98.9 KB

Hope this can help you,

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

1 Like
3

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

IMG_2591.jpeg
IMG_2591.jpeg1170×2532 182 KB

thanks for your time

4

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
BSSTechVenture_0-1715875854306.png634×802 165 KB

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

1 Like
5

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

IMG_2592.jpeg
IMG_2592.jpeg1170×1733 179 KB

6

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
BSSTechVenture_0-1715916627763.png496×725 92.5 KB

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