Help with consistent spacing between sections on mobile

[insideyagolf]

I need some help having consistent spacing under the accessories collection card on mobile for my website. *note: please do not reach out to me on my social media accounts* www.insideyagolf.com 

  

[DaisyVo]

Hi @insideyagolf 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
.collection-list-wrapper {
    padding-block: 16px !important;
}
}

Here is the result: 

I hope this helps

Best,

Daisy

[LizHoang · Accepted solution]

Hi @insideyagolf, thanks for reaching out. 

To address the issue, please go to your Online store > Theme -> Customize -> Theme settings -> Custom CSS and insert the following custom CSS code:

@media screen and (max-width: 749px) {
    .section-collection-list .page-width {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .collection-list {
        row-gap: 16px !important;
        padding-top: 0 !important;
    }
}

This is the expected result: https://prnt.sc/u0TcNFIITfpn 

I hope my solution is helpful to you, and please feel free to feedback.

Liz