How to make products per row 3 or 4 for mobile devices

[zakuntsart]

How to change products per row 3 or 4 for mobile devices. I can only pick from 1 to 2.  Impact theme 

https://simaxsports.com/collections/2023-omaha-cup

[hadi765]

Can you share the Store Url?

[zakuntsart]

https://simaxsports.com/collections/2023-omaha-cup

[hadi765]

This is how you can change them to 3 row or 4 row

@media(max-width: 768px){
	.shopify-section--main-collection .product-list{
		grid-template-columns: auto auto auto;
	}
}

this is for 3 grid, you can add 4th auto to make it 4.

If you wanna link them with the customizer, it will take some more coding, for that you can drop me a message and i can help you out.

[irene-vintage]

Hello @zakuntsart ,

You can try to follow these steps:

Go to Online Stores -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file -> add this following code at the bottom of page

/* Adjust product grid */
.product-grid-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  flex-basis: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .product-item {
    flex-basis: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {
  .product-item {
    flex-basis: calc(100% - 20px);
  }
}

Save changes

Hope this can help you out.

Ali Reviews team.

[INA_MSWEB]

Hi @zakuntsart 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.css file:

@media screen and (max-width: 699px) {

.product-list {grid-template-columns: repeat(3, 1fr) !important;}

}

Regards,

San