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

Solved
Logicbomb
Excursionist
9 0 0

@Jasoliya mhhh it still gives me 1 product per row, i'm not keeping the featured collection active on my website right now because i dont want to let it see to my visitors before is well adjusted. I tried activating the featured collection section with the last piece of code you gave me but on mobile keeps showing 1 product per row, so now i deactivated it again.

if you visit my website you will not see it just to be clear :)

0 Likes
Logicbomb
Excursionist
9 0 0

@Jasoliya there is a misunderstanding, i'm not talking about the 4 products you see in my homepage, at the bottom of my homepage i want to add a new "featured collection" section. so i tried the code you gave me with a new featured collection, i checked if it was ok on mobile but still 1 product per row, so now i deactivated it. im not talking about the 4 products you see on homepage, they are fine, hope i've been clear now :D 

0 Likes
Jasoliya
Shopify Expert
4219 569 1039

ohk, add this css to make two product per row in mobile

.featured-collection .card{ width:50%;float: left;    padding-left: 5px;}
.featured-collection .card:nth-child(2n+1) {clear: both;}
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 okay yeah now it works on mobile! :) Buuuut... daaamn there's the problem on desktop version now hahah 
any tip? 

Schermata 2019-12-10 alle 15.16.04.png

0 Likes

@Logicbomb,

Please put your code in below media query

@media only screen and (max-width: 749px) {
}

Then It will not affect on desktop

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
Jasoliya
Shopify Expert
4219 569 1039

This is an accepted solution.

Change with this

 @media only screen and (max-width: 767px) {
      .featured-collection .card{ width:50%;float: left;    padding-left: 5px;}
      .featured-collection .card:nth-child(2n+1) {clear: both;}
    }

 

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

@oscprofessional @Jasoliya yesssss thanks guys it worked now :) thank you so so much, it's now safe to say: case closed! :D 

0 Likes
jahlbom
Excursionist
37 2 12
Hi @Jasoliya , instead of creating a new thread, this is exactly the solution Im looking for but for the ”all-products” page.

Is there any similar code I can use to get 2 products inline instead of 1 big In mobile view? it Will give a much better product overview for our customers if possible.

Im using narrative theme.

this is the url to all products page; https://www.shoptatt.com/collections/all

Thanks! Jesper
0 Likes
Jasoliya
Shopify Expert
4219 569 1039

HI @jahlbom 

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

 @media only screen and (max-width: 767px) {
      .collection-template .card.critical-clear{width:50% !important;float:left;} 
      .collection-template .card.critical-clear:nth-child(2n+1) {clear: both;}
    }
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
jahlbom
Excursionist
37 2 12
@Jasoliya - works fine! Where in the code do i add a couple of px padding inbetween the images?

Much appreciated, thought for a While i had to change theme 💎
0 Likes