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.

[MaxCosta]

@KetanKumarthank you so much.. !

[KetanKumar]

@MaxCosta 

thanks for it 

sorry your link doesn't work now 

[MaxCosta]

@KetanKumar,

Really ? I don't know why,

Please try it : https://s9hj7vdn12zjvbbv-47455862950.shopifypreview.com

Thank you in advance,

[KetanKumar · Accepted solution]

@MaxCosta 

Thanks for the update, yes please add this code

.color-swatch--small:before, .color-swatch--small {border-radius: 100px;}
.grid-product__colors{justify-content:  center;}
@media only screen and (max-width: 589px) {
#shopify-section-16193798554af94825 .grid-overflow-wrapper .grid__item:first-child {margin-bottom: 30px;}
}

[MaxCosta]

Thanks a lot..!

[MaxCosta]

@KetanKumar iam sorry to come back...

 A lot of times on mobile when I launch the store, the color variants are not displayed. Although they are visible in my « customize theme » section... but when I go to « preview » with my mobile, we do not see...

What do you think about that ?

max 

[KetanKumar]

can you please share page url for  this issue 

[breeziecee]

Hello! I am needing help with my homepage. The section is .home_collection_section and I would like for there to be the three collections in a row and currently it is showing two collections in a row with the third underneath aligned to the left. https://originalsprout.com/

Here is the code I found in theme.scss.liquid

.home_collection_section {
width: 50%;
float: left;
margin: 30px 0px;
text-align: center;
.caption_text_collection{
font-size: 48px;
font-style: italic;
text-transform: capitalize;
font-family: 'Bodoni-BookItalic';
color: #666666;
text-shadow: none;
position: relative;
}

[KetanKumar]

@breeziecee 

do you have like this look pleas confirm

[breeziecee]

Thats what I want it to look like right now it looks like this: