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

[Logicbomb]

@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 :)

[Logicbomb]

@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 

[Jasoliya]

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;}

[Logicbomb]

@Jasoliya okay yeah now it works on mobile! :) Buuuut... daaamn there's the problem on desktop version now hahah 
any tip? 

[oscprofessional]

@Logicbomb,

Please put your code in below media query

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

Then It will not affect on desktop

[Jasoliya · 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;}
    }

[Logicbomb]

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

[jahlbom]

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

[Jasoliya]

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;}
    }

[jahlbom]

@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 💎