Fit product collection on frame border

Store Design
,

Topic summary

Goal: make the collection list display full-width to match a Photoshop mockup.

What was tried:

  • Added CSS via Theme Editor > Collection list > Custom CSS: .page-width-desktop { max-width: 100% !important; } — initially reported as not working.
  • Added targeted rules in base.css (theme stylesheet), including selectors like .collection-list-wrapper… and a media-query rule for .section-template–22539441996064__collection_list_pTQBXp-padding with max-width: 100% !important.

Findings/diagnosis:

  • base.css contained improperly closed code (syntax issue), so new rules didn’t take effect; possible overrides from other code/apps were also suspected.
  • The shop link was shared; helpers noted they couldn’t see the added code in base.css at one point.

Outcome:

  • Pasting the CSS in the section’s Custom CSS field (Theme Editor) worked, and it’s acceptable to keep it there.

Key terms:

  • base.css: the main theme CSS file; a syntax error can block subsequent rules.
  • Custom CSS (Theme Editor): per-section CSS override that can effectively apply full-width styles.

Status: Resolved by using the section-level Custom CSS; base.css edits failed due to syntax/override issues. Images were central to visual intent and results.

Summarized with AI on December 25. AI used: gpt-5.
2

@josoneryx1890 Please follow below steps to increase the width of the collection list. Let me know whether it is helpful for you.

  1. From admin go to “Online Store” → “Themes”.
  2. Click “Customize” button from the current theme.
  3. Click “Collection list”.

Vinsinfo_0-1719811643926.png
Vinsinfo_0-1719811643926.png417×453 17.4 KB

  1. Then scroll down and paste the below code in the “Custom CSS” field and save changes.
.page-width-desktop {
    max-width: 100% !important;
}

Vinsinfo_1-1719811657012.png
Vinsinfo_1-1719811657012.png418×726 33.4 KB

Result will be like,

Vinsinfo_2-1719811665365.png
Vinsinfo_2-1719811665365.png1862×834 251 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.