Add padding to headers and filters in collection page on mobile

Topic summary

A user encountered missing left and right padding on collection page headers and filters when viewed on mobile devices. They requested CSS modifications to fix this spacing issue across all collection pages.

Solution Provided:

  • Add custom CSS code to the theme.liquid file before the </head> tag
  • The CSS targets mobile screens (max-width: 767px) and applies 1.5rem padding to:
    • .collection-hero__title
    • .scroll-trigger.animate--fade-in.facets-container

Outcome:

  • The user confirmed the solution worked perfectly
  • Screenshots were shared showing the before/after results
  • Issue resolved with proper mobile padding now applied to collection page elements
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Hi,

Somehow there isn’t any padding for my collection pages for the headers and filters - I’d like padding on left and right, could somebody advice what to modify? Attached link is for one product page but this change should apply to all collection pages, thank you!

https://www.wastd.world/collections/serving-platter

Hello @letsgetwasted

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .collection-hero__title { padding: 0 1.5rem !important; } .facets-container.scroll-trigger.animate--fade-in { padding: 0 1.5rem !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

@letsgetwasted ,

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid


Result:

Hope it helps :blush:

Worked perfectly, thank you :slightly_smiling_face:

1 Like

Dear my friend,

:heart_eyes: It’s such my honor to help you, bro.

Can you give us some Likes, it will be the greatest motivation for us.

Thanks in advance!