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

Solved
MaxCosta
Tourist
84 0 30

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
Shopify Partner
17039 1848 6375

@MaxCosta 

do you have like this?

KetanKumar_0-1619709513766.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Tourist
84 0 30

Thanks a lot for your answer. No not really, this is what I have:

screen1.png

 

 

So I don't understand why you have 3 products ...

 

Then here's what it does to me on mobile:

 

screen2.png

 

While I would like this ...:

 

180308766_3929882507125036_1205991510123494345_n.jpg

 

 

MaxCosta
Tourist
84 0 30

Oh you probably have 3 products because you must be on the collection page. My problem concerns the home page.

 

Thanks in advance to all...

0 Likes
MaxCosta
Tourist
84 0 30

Really sorry to reiterate but please someone already had this problem? This is very important to me ... Thanks in advance for your help

0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

@MaxCosta 

can you please confirm this?

KetanKumar_0-1619726157999.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Tourist
84 0 30

Thank you for your reply  @KetanKumar 

no,but the photo you just sent me is what I would like to have on my homepage

I have that: (this is a slider) 

F266E617-86AB-435D-93E0-5F29AC283219.png

0 Likes
MaxCosta
Tourist
84 0 30

@KetanKumar @This is what I want !

KetanKumar
Shopify Partner
17039 1848 6375

This is an 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%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MaxCosta
Tourist
84 0 30

it's much better but it does this to me:

E9F8A50C-3DF0-4121-8032-42FEF0A28782.png

77EE87B4-738C-4B95-AE5B-0A9424DBD416.png

In addition, would it be possible to create a small space (margin) at the edges of the screen? like this : 

7FB19F07-5E13-4875-AD1C-222ACA6D7E6D.png



ty 

0 Likes