Shopify themes, liquid, logos, and UX
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.
HI,
can you please store details. I can check & let you know where the changes are required
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.
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 ;
}
}
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).
I want the grid size of the products to be increased on the collection pages. (please look image below)
Thanks for the help
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;
}
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 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?
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;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024