Consistent Spacing Between Collection Cards on Mobile

Store Design
, ,
1

I would like to have consistent spacing between my collection cards on mobile. On desktop, my sections are spaced correctly but I can’t figure out how to change this on mobile. The sections under “good golf, great friends, quality apparel” has the spacing I want to achieve. The collection cards are labeled “All products, Apparel, and Accessories”

IMG_1072.PNG
IMG_1072.PNG1179×2556 216 KB

IMG_1071.PNG
IMG_1071.PNG1179×2556 272 KB

2

@insideyagolf copy and paste code in base.css

@media only screen and (max-width: 768px) {
.collection-list {
    row-gap: 16px !important;
    padding-top: 3px !important;
}
}
1 Like
3

@insideyagolf copy and paste code in base.css

@media only screen and (max-width: 768px) {
.collection-list {
    row-gap: 16px !important;
    padding-top: 3px !important;
}
}
1 Like
4

Hi @insideyagolf

Just follow the steps Below:

  1. Go to online store → theme
  2. select three dots and select code edit
  3. Search for the file theme.css and base.css
  4. past that code at the end
@media(max-width:766px){
    .collection-list {
        row-gap: 16px;
        padding-top: 5px;
    }
}
​

I hope this solution worked for you!
If yes Just like this Reply and Mark it as a Solution and to keep me motivated BUY ME A Coffee

1 Like