How can I Display more then Two product on a row in mobile view of venture theme

Mdsabbirhossain
Visitor
3 0 0

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. 

 

 

mobilemobile

 

Replies 4 (4)

hawkscode
Shopify Partner
177 14 13

Hi @Mdsabbirhossain 

 

please can you share store url 

banned
Mdsabbirhossain
Visitor
3 0 0

https://livingtexglobal.com/

Here it is
Thank you

Paul_vd_Dool
Shopify Partner
107 6 95

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)

 

Doppelganger - Managing duplicate user accounts

iCart_App
Shopify Partner
479 57 103

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


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com