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

Solved
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.

 

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
2529 424 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Excursionist
9 0 0

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

0 Likes
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
Shopify Expert
2529 424 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Excursionist
9 0 0
Shopify Expert
2529 424 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
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
Shopify Expert
2529 424 535

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes