Paste grid-shaped lines

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.

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 asa solution. Thank you :heart_eyes: