How Can I change my product grid size for Expanse Theme

robu1
New Member
16 0 0

1) There is more Gap between each product. I don't want that Gap. You can see the products below.
2) How can I increase my product's width and length? It is appearing too short in the mobile app. I have tried using codes used for many other themes. But no use. 

robu1_0-1624077372899.png

 

Replies 11 (11)

Akibhusen
Shopify Partner
715 121 147

HI,

 

can you please store details. I can check & let you know where the changes are required 

robu1
New Member
16 0 0

@Akibhusen 
site url: https://telugupop.com/
password: deesti

Akibhusen
Shopify Partner
715 121 147

HI @robu1 ,

open theme.css & find for '.grid-product__image-wrap' class. update margin to 0px; 

 

.grid-product__image-wrap{

margin:0;

}

after updating the margin it looks like given screenshot.

Akibhusen_0-1624122276825.png

 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @robu1 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-1525295772132 .new-grid.product-grid.scrollable-grid--small .grid-item{
    flex: 0 0 33.33%!important ;
}
#shopify-section-1525295772132  .grid-product__image-wrap{
margin:0;
}
@media only screen and (max-width: 768px){
#shopify-section-1525295772132  .new-grid.product-grid.scrollable-grid--small{
    display: flex;
    flex-wrap: wrap;
}
#shopify-section-1525295772132 .scrollable-grid--small {
    overflow: hidden;
    overflow-x: hidden;
}
#shopify-section-1525295772132 .new-grid.product-grid.scrollable-grid--small .grid-item{
    flex: 0 0 25%!important ;
}
}

 

 

robu1
New Member
16 0 0

@Kinjaldavra It is not working. Can you please check once and help?

robu1
New Member
16 0 0

Hi @Kinjaldavra . I have added the code you mentioned above. The grid size got increased in the landing page for the featured collection preview (Please look the below picture). 

robu1_0-1624195902680.png

I want the grid size of the products to be increased on the collection pages.  (please look image below)

robu1_2-1624196107127.png

Thanks for the help

 

Akibhusen
Shopify Partner
715 121 147

HI @robu1 ,

 

Please used my css code this will work for your collection page. Add at the end of your theme.css file

.collection-content .grid-product__image-wrap {
margin: 0;
}

Uniqaya
Visitor
3 0 1

Hey, I added the code you mentioned above but nothing happened. My store is uniqaya.com
It would be great if you could help me out.

Akibhusen
Shopify Partner
715 121 147

I think it's resolved @robu1.

let me know  if you are still facing the issue

robu1
New Member
16 0 0

@Akibhusen I can find more than 50 classes of .grid-product__image-wrap. which should I modify exactly? or should I modify each and every one of them?

Akibhusen
Shopify Partner
715 121 147

HI @robu1 ,

 

Do one thing, Just add the below-given CSS at the end of your theme.css file.

 

.collection-content .grid-product__image-wrap {
margin: 0;
}