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.
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: