To show one product per row for Mobile view

[JerrySedra]

Dears,

I am using Foodie Theme, and I am trying to show only one product per row for the Mobile view,

but the customization view provides 2 products per row as a minimum selection.

How can I edit the script to show only 1 product per row?

Thanks in advance.

[collinsmbaka]

Hi @JerrySedra 

You can update this from the theme schema settings. In this case, I will recommend updating it with CSS. Please send me the page URL to check it 

[JerrySedra]

Hi @collinsmbaka,

please check https://veginneg.com/

[collinsmbaka · Accepted solution]

@JerrySedra 

Use this CSS to show one product per row

article.product-listing.dropshadow--false.padding--false.span-6.sm-span-6.auto.relative.square.aos-init.aos-animate {
    grid-column: auto/span 12 !important;
}

Please follow these steps to apply the CSS

1. From your Shopify admin dashboard
2. Navigate to Online stores > Themes > Select the main theme
3. Click on Actions > Edit code
4. From the code editor, search for the stylesheet.css file
5. Then paste the above CSS at the bottom of the stylesheet.css file
6. Save and refresh the pages so check your changes

Cheers!

[JerrySedra]

Great!!, it is working 

but on the home page, there is like scroll right and left, I need to list all products one per row like other pages.

[collinsmbaka]

@JerrySedra 
Oh, that's a custom setting from the theme. They are using JS for the slider. That will require customization from the theme codes.

The CSS above will make it show one per row on both desktop and mobile
If you want to show one per row on mobile only

Please use this CSS

@media (max-width: 767px) {
article.product-listing.dropshadow--false.padding--false.span-6.sm-span-6.auto.relative.square.aos-init.aos-animate {
    grid-column: auto/span 12 !important;
}
}

[JerrySedra]

@collinsmbaka, thanks a lot for your support!
for the home page, it cant be edited to be the same?

[collinsmbaka]

@JerrySedra 
You want to remove the slider and list the collections, correct?
Unfortunately, you can't change this with CSS. I will need to customize the theme. 

[Shehbaz]

Can you suggest same for Bagratica theme.

[BryannaSundry23]

Hi Colin, 

Thanks for the above help! I have a collections template on my Shopify website, which shows 3 x products in a row on Desktop but I want it to show 1 x product per row in mobile. When I followed the above instructions, my theme doesn't have "stylesheet.css" file in the code menu of files. 

Do you have any other advice / tips for my situation?

Thanks so much!

Bryanna 

[Emily]

Hi, @JerrySedra.

Thank you for reaching out, and thank you, @collinsmbaka, for your help! I'm glad you were able to get a solution to your question. 

Please let me know if you have any further questions, and I would be happy to help you! I would love to learn more about your business. What type of products do you sell?

Talk soon,

[JerrySedra]

Hello @Emily, 
Hope all is well,

We are Veginn Food Store, We created Veginn to create a space for busy vegans and non-vegans where they can order healthy and delicious meals that will benefit their health and fuel their bodies for the day.

Also, I have two questions 😁 :
1- How to allow drop pin on Maps for online clients instead of typing the addresses?

2- I need the clients to log in using their Facebook and Google accounts, they are appearing on the customize page, but not on the store page.