How Can I change my product grid size for Expanse Theme

Store Design
1
  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
robu1_0-1624077372899.png1297×436 263 KB

2

HI,

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

3

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

4

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
Akibhusen_0-1624122276825.png1885×904 257 KB

5

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 ;
}
}
6

@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?

7

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

8

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;
}

9

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
robu1_0-1624195902680.png1920×1080 349 KB

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

robu1_2-1624196107127.png
robu1_2-1624196107127.png1920×1080 273 KB

Thanks for the help

10

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;
}

11

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.

12

I think it’s resolved @robu1 .

let me know if you are still facing the issue