Goal: Adjust the width of collapsible content on the Stockists page to match the homepage, without affecting the homepage.
Initial attempt: A code addition in theme.liquid changed widths on both pages and made them too small.
Scoping fix proposed: Wrap Stockists-specific changes in a Liquid condition: if page.handle == ‘stockists’ (page.handle identifies the current page). However, the example showed the condition without the actual CSS inside.
Working CSS provided: Adding .grid–1-col .grid__item { max-width: 95% !important; } to base.css improved the Stockists layout.
Further adjustment: The requester asked to make it slightly wider to match the homepage. Advice given: increase the max-width value (e.g., above 95%) until it visually matches.
Key consideration: Ensure the CSS applies only to the Stockists page to avoid affecting the homepage—either by wrapping the CSS within the Liquid condition in theme.liquid or by using a Stockists-specific selector.
Status: Partially resolved; final tuning of max-width and scoping to the Stockists page remain as action items. Screenshots and a shop link were provided for context.
Hello, I have 2 collapsible content on my website. One in the main page which is perfect on desktop and mobile and one on the “stockist” page.
I would like to modify the stockist one. I would like it to be a bit less wide ( the same as in the front page basically) as i showed in the screenshot ( and of course on the right size too).
This modification must not modify the size of the one in the main page as it is already perfect
