How can I adjust the size of collection images on my webpage?

Store Design
1

https://theoutletgo.com/collections this page is still not same size.

I want to to be able change size of collection layout on my page because now in mobile view the collection pics are so huge . Can someone help to make it medium size all images , and i want to be able to change size of it with padding for future ( if this can be happened in shopify idk )

2

Hi @fashah973
You mean you want to reduce the product image size?
Do you want to make the product list show 2 items per row?

3

Hi @fashah973 ,

This is Victor from PageFly - Advanced Page Builder App.

You can go to Online store => themes => actions => edit code and add this code on file theme-styles.css or paste it in your theme.liquid above the

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

.img-box img{
width: 308px;
height: 352px;
}.

}

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hi i tried it but no it doesnt make any changes on the page instead it appears in head as a code

https://theoutletgo.com/collections i want the collection list images to be same and reduce it size a bit on mobile view

5

Hey yes i want the product images box size to be reducessed but the images in box should show the exact pic and not cut the pic, but also in mobile view i want it to be reduced a little bit

https://theoutletgo.com/collections

6

in mobile view i want it to look same size as Watches & jewelry .

https://theoutletgo.com/collections

7

Hi @fashah973
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.collection-item .img-box {  
position: relative;
  padding-top: 100%;
}
.collection-item .img-box > a{  
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.collection-item .img-box img{ 

width: 100%;
height: 100%;
object-fit: contain;
 }
8

@ExpertRookie there is no base.css in my these i even created 1 to run ur code but still no changes

9

HI @fashah973
Just recheck your store.
You can try follow this path:
Themes => edit code => asset => theme-styles.css
and add the code to bottom of the file theme-styles.css