A user working with Shopify’s Timber template wants to modify their mobile homepage layout. Currently, their featured collection grid displays two columns wide on mobile devices. They want to change this to a single-column stack with spacing between each collection box.
Proposed Solution:
small-one-half to small-one-wholeStatus: The issue remains unresolved. A responder offered to help implement the fix directly and noted current mobile display issues affecting visitors.
Hi, I used the Timber template.
In mobile view our ‘click to shop for’ collection grid shows as 2 wide.
The change I want to make is that in mobile view - I would like for each box (which is a collection) to stack 1 wide and on top of the next with a small amount of white between each.
Can you help by providing the code to add?
my website is drivercam.co.nz
You’d need to go into the grid section and change the class attribute values small-one-half to small-one-whole ; along with some logic to only apply to the homepage and that specific section.
Reach out if you need it fixed.
Or try to override it with a custom-css setting but you’d have to build some obnoxious selectors because of how ambigiously the theme is structured by not using section elements or giving sections proper identifiers or even unique ids.
FYI this is how your mobile visitors are getting treated
