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:
Hello Logicbomb,
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.
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;}
}
1 Like
thank you @Jasoliya i’m gonna try it as soon as i get home
@Jasoliya so apparently code has something wrong, this is how it looks on mobile lol
Send me your store url
1 Like
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
1 Like
@Jasoliya so i’m adding this to theme.scss at the bottom and then i put the featured collection section on my homepage?
No just add this css in theme.scss file at bottom. section already added on you store
@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
@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 
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;}
2 Likes
@Jasoliya okay yeah now it works on mobile! Buuuut… daaamn there’s the problem on desktop version now hahah
any tip?
Please put your code in below media query
@media only screen and (max-width: 749px) {
}
Then It will not affect on desktop
1 Like
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;}
}
3 Likes
@oscprofessional @Jasoliya yesssss thanks guys it worked now thank you so so much, it’s now safe to say: case closed!
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
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;}
}
4 Likes
@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 ?