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

Store Design
1

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.

mobile
mobile420×562 147 KB

2

Hi @Mdsabbirhossain

please can you share store url

3

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)

4

https://livingtexglobal.com/

Here it is
Thank you

5

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.