How to increase side padding / white space on Collections Page on mobile view – Baseline Theme

Store Design

Topic summary

Main issue: Increase side padding/white space on the Collections page in mobile view (Baseline Theme) so product images don’t touch the screen edges.

Action taken: Added a CSS rule in theme.min.css targeting the collection grid to set margin: 5px !important. Steps provided: Online Store → Themes → Actions → Edit code → Assets → theme.min.css.

Outcome: The change worked as confirmed by the requester. A screenshot was shared to show the visual result (image attachment was central to the confirmation).

Technical note: The solution modifies CSS (grid selector) to create side margins; it does not explicitly use a mobile-only media query, but the effect was acceptable for the mobile view described.

New development: A follow-up question asks how to similarly adjust side margins for the collection section at the bottom of the homepage (after removing grid lines). Link provided for context.

Status: Original collection-page mobile padding issue resolved; homepage margin question remains open with no posted solution yet.

Summarized with AI on December 16. AI used: gpt-5.
1

Hello,

How to increase side padding / white space on Collections Page on mobile view only – Baseline Theme?

At the moment on mobile view, the product images (the largest images in this collection, that is) go right to the edge of the screen, I wish to add some white to either side please, URL is: https://contrakidsmutiny.com/collections/new-arrivals

Thanks!

2

Hello @MJ82
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->theme.min.css
add this code at the end of the file.

ul.grid.grid-cols-2.lg\:grid-cols-4.gap-gutter.bg-border {
margin: 5px !important;
}

result

11.png
11.png422×820 124 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Thanks a lot, that worked!

One other question now:

  1. On the homepage at the bottom, how can I similarly adjust the side margins at the bottom where some of the collection appears? Pls see here: https://contrakidsmutiny.com/

(I removed the grid lines actually, so that was manual change I just made, thanks)