What's your biggest current challenge? Have your say in Community Polls along the right column.

How can I reduce product image size on my home page for mobile view?

Solved

How can I reduce product image size on my home page for mobile view?

Emiway
Pathfinder
245 0 46

I want my product size smaller in mobile view. I am Referencing images to you 

My Website: https://houseofsneakers.in/

Reference website: https://hypestockexchange.in

IMG-20240102-WA0020.jpgIMG-20240102-WA0021.jpg

Want small product in first website house of Sneakers you can see difference between them!!

 

Accepted Solution (1)

Abdosamer
Shopify Partner
943 172 198

This is an accepted solution.

Hi @Emiway , go to theme.css and add the following code :

@media (max-width:990px){

.product-list__inner--scroller {
   
    grid-auto-columns: 40vw !important;
    
}

}

Result:

Abdosamer_0-1704203573228.png

 

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

Replies 2 (2)

Abdosamer
Shopify Partner
943 172 198

This is an accepted solution.

Hi @Emiway , go to theme.css and add the following code :

@media (max-width:990px){

.product-list__inner--scroller {
   
    grid-auto-columns: 40vw !important;
    
}

}

Result:

Abdosamer_0-1704203573228.png

 

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

websensepro
Shopify Partner
1290 145 166

Hi, @Emiway.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media (min-width: 320px) and (max-width: 767px) {


.product-list__inner--scroller {
    grid-auto-columns: 32vw !important;
}

}

 

Result:

websensepro_0-1704294229584.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial