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

New Member
3 0 0


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. 





Replies 4 (4)
Shopify Partner
74 15 13

Hi @Mdsabbirhossain 


please can you share store url 

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
- Feel free to contact me on regarding any help
- Skype : vikas.hawkscode
Shopify Partner
37 3 21



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 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:


Shopify Partner
131 9 28

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.

Binal Savani | iDentixweb

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!