Help with consistent spacing between sections on mobile

Store Design
, ,

Topic summary

A user is experiencing inconsistent spacing below the accessories collection card on mobile for their Shopify store (insideyagolf.com). Screenshots show the spacing issue on mobile view.

Two solutions were provided:

  • DaisyVo’s approach: Add CSS targeting .collection-list-wrapper with padding-block: 16px for screens under 768px width. Includes a screenshot showing the result.

  • LizHoang’s approach: Add CSS targeting .section-collection-list .page-width and .collection-list with specific padding and row-gap adjustments for screens under 749px width. Includes a screenshot link of expected results.

Both solutions involve adding custom CSS code through Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS. The discussion remains open as the original poster has not confirmed which solution worked or if the issue is resolved.

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

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

IMG_1348.PNG
IMG_1348.PNG1179×2556 257 KB

IMG_1347.PNG
IMG_1347.PNG1179×2556 293 KB

2

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:

image.png
image.png351×667 57.8 KB

I hope this helps

Best,

Daisy

3

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

1 Like