Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
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;} }
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;} }
@Jasoliya so apparently code has something wrong, this is how it looks on mobile lol
Send me your store url
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
@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;}
@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
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;} }
@oscprofessional @Jasoliya yesssss thanks guys it worked now 🙂 thank you so so much, it's now safe to say: case closed! 😄
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;}
}
Add this css:
@media only screen and (max-width: 767px) { .collection-template .card.critical-clear:nth-child(2n+1) {clear: both; padding-left: 5px;} .collection-template .card.critical-clear {padding-left: 5px;} }
Hi!
Where should I put the code to make the featured collection two rows on mobile? Thanks for your help!
Send your store url
Im having the same problem! It's only showing 1 product on mobile view. Ive tried the code thats on this thread but i'm unsure on where to put it?
Send your store url
hi just wondering if anyone would please be able to show me the code I need to add for this?
So you want to make 2 product/row in mobile? if so we have to change some code as per your theme code.
Hi im on Brooklyn theme and the code is not working, any idea of what to do?
Send your store url
Hello! Could you help me too, maybe?
Hi! Hope you safe!
same issue...
How to show 2 rows of product on mobile?
now is only one in row so... super big...
Thank you sooo much if u give me any advise!
my website : www.doubledarespa.com
HI @Kael
For that we have to change whole page structure in two column like images left and information on right, PM me if you want, its not simple to give you code we have to change whole age structure for that.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024