@josoneryx1890 , it seems that other code or app is overwriting the code I gave you, would you mind If I send you an access request and add the code myself for better solving this problem?, feel free to contact me.
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.