Remove padding from Collection List on Motion theme

Store Design
, ,

Topic summary

Goal: Remove side and vertical padding so the Motion theme’s Collection List spans full width and sits flush with adjacent sections.

Context: The OP shared a draft preview URL. Early CSS made the section full-width but left top/bottom spacing.

Solutions proposed:

  • Add CSS (either in theme.liquid before within a block or in base.css) targeting the specific Collection List section ID to set:
    • .page-width { max-width: 100%; padding: 0/unset; }
    • Section { margin: 0; }
  • Initial snippets used a media query @media (min-width: 590px). After feedback, helpers added rules for multiple Collection List instances by targeting each section’s unique ID (…E6ifmT, …M3RKJz, …9Fh98b) and setting margin: 0 and .page-width padding: 0.

Outcome: OP confirmed the desktop issue is fixed (full-width and no vertical padding) for all relevant sections.

Open point: OP asked how to apply the same behavior on mobile; no mobile-specific CSS was provided yet. Note the current media query only affects screens ≥590px, so mobile will require additional rules.

Attachments: Screenshots show before/after spacing results; helpful but not required to follow the fix.

Status: Ongoing; awaiting mobile guidance.

Summarized with AI on December 20. AI used: gpt-5.
7

Hi Niraj,

Thank you for this. It has fixed the issue with the width, however, I am still showing padding above and below. I am also using the Collection List block another 2 times further down the page. Is there a way that these will follow the same customisations?

Thanks again.