Thanks a lot for your answer. No not really, this is what I have:
So I don’t understand why you have 3 products …
Then here’s what it does to me on mobile:
While I would like this …:
Topic summary
A Shopify store owner using the Motion theme needs to display a featured collection on the homepage with 2 products per row on both desktop and mobile devices.
The Problem:
While the desktop layout displays correctly, mobile view defaults to a slider/switcher format instead of the desired 2-column grid layout. The collection page already shows the correct 2-column mobile layout, but this needs to be replicated on the homepage.
The Solution:
A community helper (KetanKumar) provided custom CSS code to be added to the theme.css file. The solution involved:
- Disabling the overflow slider behavior on mobile
- Setting grid items to 50% width with flex-wrap
- Adding proper margins and padding for spacing
- Targeting the specific section ID (#shopify-section-16193798554af94825)
Follow-up Adjustments:
Additional CSS was provided to:
- Center color swatches and convert them from squares to circles
- Adjust spacing between product rows
- Add side margins for better mobile presentation
Current Status:
The solution was confirmed working, even with the latest Motion theme updates. Multiple users have successfully implemented this fix. One user reported intermittent issues with color variants not displaying on mobile preview, though they appear in the theme customizer.
1 Like