Urgent - Theme Motion: Featured collection on Home Page - 2 products per row

[MaxCosta]

Hello all,

This is my first post on this forum because I have an urgent problem with a Shopify store using the Motion theme.

I want to add a Featured Collection on my home page with 2 products per line and 3 product lines. As on this site: https://www.eliou-eliou.com/

When I add the "Featured collection" Section, the layout is perfect on computer, but on mobile, it looks like a "switcher" or "slider" form, and it doesn't suit me at all ...

Like on the site I sent you, I would like to have 2 products per line on mobile and keep this layout on my desktop.

The strangest thing is that on my Collection Page on Mobile, I have 2 products per line and it's perfect. But this change should only apply to the home page.

I tried a lot of things but can't find any solution ... you would save me if you could help me ..!

Here is a preview link of my site which is not yet live : https://v0b1y1qikmo74hph-47455862950.shopifypreview.com

Thank you in advance...

Max C.

[KetanKumar · Accepted solution]

@MaxCosta 

thanks for confirm please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@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%;
}
}

[KetanKumar · Accepted solution]

@MaxCosta 

thanks for your feedback yes, please add this code

@media only screen and (max-width: 589px) {
#CollectionSection-16193798554af94825 .page-width--flush-small {
    padding: 0 15px;
}
}