How to display 2 products per row on mobile only

Solved
Highlighted
Tourist
24 0 0

Hi there,

I'm using a theme I bought, so the existing instructions on the subject are not very easy for me to follow, as things are a bit different in my code.
So this is my store https://www.focallurecosmetics.gr/
I would like 2 products per row on mobile view only.

Any suggestions??

Thank you,

0 Likes
Highlighted

Hello @NatCosm,

As I checked your site ,On homepage there are 2 products in one row  in mobile...

Do you want 2 products per row in collection pages??

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
24 0 0

Yes! I thought I had made this clear but I didn't! I want 2 products per row in collections!

Thank you 

0 Likes
Highlighted

This is an accepted solution.

Hello @NatCosm ,

1. Go to Online Store->Theme->Edit code
2. Asset->timber.scss->paste bellow code in bottom of file

@media only screen and (max-width: 480px) {
.template-collection #shopify-section-section-collection .grid__item.large--one-half.medium--one-half {
width: 50%;
}
}

Or Go to collection-template.liquid and add small--one-half class as shown in below screenshot

2019-12-10_14-18.jpg

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
24 0 0

Hi again!
I have a similar question!

I have added a bundle app that displays two more products under "add to cart" button, on every product page. On mobile view though, those two products seem to be aligned vertically and their "add to cart" buttons are hidden as they overlap.  Any suggestions on how to make them appear in the same row?

Thank you,

0 Likes
Highlighted

Hello @NatCosm ,

Please add below css

@media only screen and (max-width: 600px) {
.product-container .product-thumbnail {
    height: auto!important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 1

Already not working!

Highlighted
New Member
7 0 0

Hi there. I'd like to be able to do the same on my collections page. It's currently only on my home page. I'm using the Narrative theme. Please assist. Thanks. 

0 Likes
Highlighted
Excursionist
17 5 3

Hi @oscprofessional,

How can I change my Brooklyn theme to display 1 product per row on mobile only? Please advise.

0 Likes
Highlighted
New Member
2 0 0

Can you please help me out with my website. https://mumily.com/collections/nilco-board-and-card-games?page=1
I have the same issue and I cant use the same code u added for the 2 above websites

0 Likes