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

 

0 Likes
Akibhusen
Excursionist
196 37 68

HI,

 

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

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
robu1
New Member
16 0 0

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

0 Likes
Akibhusen
Excursionist
196 37 68

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 Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
Natztech
Shopify Partner
1381 388 941

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

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
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?

0 Likes
robu1
New Member
16 0 0

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

0 Likes
Akibhusen
Excursionist
196 37 68

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

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
robu1
New Member
16 0 0

Hi @Natztech . 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

 

0 Likes
Akibhusen
Excursionist
196 37 68

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

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes