Shopify themes, liquid, logos, and UX
Hello.
I am working on my shopify store and modifying the design to look more attractive. I found that in a row its showing 5 products in a row on laptop or pc view but its showing only 2 products at mobile view in a row. I like to increase the number of product per row like 3 or 4 products at a row in mobile view.
hoping for the solution thank you.
Hi,
I first want to address the fact that the theme builders have done this on purpose. They purposely only show 2 items on mobile view because users will be viewing it on a very small screen. Images will be very small and text will be squished making it harder to read.
I very much advice against doing this.
But if you really want to you'll have to find a specific piece of code in the CSS files of your theme.
Ctrl + F should help you with this.
Find a line of code that looks like this:
@media only screen and (max-width: 749px)
Somewhere below that, you'll have a class selector and styling that should look something like this:
.small--one-half {
width: 50%;
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
-moz-flex-basis: 50%;
flex-basis: 50%;
}
Although only the top one (`width`) applies, you will want to change all the instances of 50% in this section to a different percentage. If you want 4 columns, that would be 100 / 4 = 25%. 5 columns is 100 / 5 = 20%. Etcetera.
You'll then need to overwrite one other attribute in order to get the columns to display with 4 or 5 columns in a row.
You can add that to the block I'm mentioning. It should then look something like this:
.small--one-half {
width: 25%;
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
-moz-flex-basis: 25%;
flex-basis: 25%;
clear: unset !important;
}
This should do it.
p.s. this is assuming you were talking about livingtexglobal.com. I Googled the product name from your screenshot and found that webshop which looked very similar to your screenshot.
p.p.s Just to be sure, I've added a screenshot of what it will look like.
(couldn't upload the screenshot so here's a link to it: https://ibb.co/Y2pLzrQ)
Hello @Mdsabbirhossain,
Hope you are doing well.
To have 3 or 4 products in one row please add the below CSS in your theme.scss.css theme file at the bottom:
@media only screen and (max-width: 749px){
.small--one-half {
width: 25% !important;
}
.grid--uniform .small--one-half:nth-child(2n+1){
clear: none !important;
}
}
Hope this will resolve your query.
iCart Cart Drawer Cart Upsell App
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