NARRATIVE - how to show 2 rows of product on mobile?

Solved
Logicbomb
Excursionist
9 0 0

Hi guys i'm adding a "featured collection" section on my homepage but i'd like to have more than 1 product per row on mobile, is it possible to increase the value of the products per row in mobile view? :) thanks! 
here's a screenshot of the "featured collection" section i'm talking about: 

Schermata 2019-12-08 alle 21.52.44.png

0 Likes

Hello 

You are using narrative theme as there is default feature to show one product on mobile biew.

You need theme customization to display two images on mobile view.

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Jasoliya
Shopify Expert
4216 569 1038

Hi @Logicbomb 

Add this css in Asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) {
      .featured-collection .card:nth-child(2n+1) {  clear: both; }
      .featured-collection .card{width:50%;float: left;padding-left: 5px;}
    }
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Excursionist
9 0 0

thank you @Jasoliya  i'm gonna try it as soon as i get home :)

0 Likes
Logicbomb
Excursionist
9 0 0

@Jasoliya  so apparently code has something wrong, this is how it looks on mobile lol


WhatsApp Image 2019-12-09 at 21.22.50.jpeg

0 Likes
Jasoliya
Shopify Expert
4216 569 1038

Send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Excursionist
9 0 0
Jasoliya
Shopify Expert
4216 569 1038

Add this css:

#shopify-section-1575635968868 .collection-list{ padding: 0;}
#shopify-section-1575635148682 .collection-list{ padding-bottom: 0;}

Note: this css only work for you and if you add and remove section the id will change 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Logicbomb
Excursionist
9 0 0

@Jasoliya so i'm adding this to theme.scss at the bottom and then i put the featured collection section on my homepage? 

0 Likes
Jasoliya
Shopify Expert
4216 569 1038

No just add this css in theme.scss file at bottom. section already added on you store

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes