Add padding to headers and filters in collection page on mobile

Store Design

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.
1

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

Screenshot 2024-09-20 at 5.49.52 PM.png
Screenshot 2024-09-20 at 5.49.52 PM.png746×1284 50.2 KB

2

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; } }

Tech_Coding_0-1726826202779.png
Tech_Coding_0-1726826202779.png315×505 11.5 KB

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

3

@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:

BSSCommerceB2B_0-1726827326132.png
BSSCommerceB2B_0-1726827326132.png509×929 22.8 KB

Hope it helps :blush:

4

Worked perfectly, thank you :slightly_smiling_face:

1 Like
5

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!