MOTION THEME - Featured collection - Change mobile layout from slider to same as collection page

[lion_no]

One of our final changes require to launch our store! 🙂

I'd like to change the mobile user experience on our store so the user can scroll down on the HOME PAGE to see all products through Featured Collection, instead of having to use the product slider which it currently defaults to - which currently looks like:

On the desktop the design layout is great and it works just as it should - without a slider:

a great example on how we'd want it to look on MOBILE is the collection page:

I found a post in regards of this issue earlier: https://community.shopify.com/c/shopify-design/urgent-theme-motion-featured-collection-on-home-page-...
But it does not seem to work on the current version of the motion theme (8.1.1)

[lion_no]

Preview link - https://m9azvufmf0h6yths-50647859379.shopifypreview.com/

[lion_no · Accepted solution]

Fixed by doing the same as mentioned here (https://community.shopify.com/c/shopify-design/urgent-theme-motion-featured-collection-on-home-page-...) - but directly editing it into the .grid-overflow wrappers instead of at the bottom of the code!

[Rafie]

This is a big problem with Motion theme and this solution does not work with version 9.0.0

That mobile experience is ridding conversion and proper product display in mobile. You should make that an option and not force everyone to display products as a slide on the home page. Users see less products 

[datboydami]

it works with the last version , in the theme.css.liquid, you have to delete all the line for the grid-overflow-wrapper and replace it with this code :

@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper {
overflow: visible;
overflow-x: visible;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid {
white-space: nowrap;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item {
width: 50%;
flex: 0 0 50%;
}
}