Hello there,
I am looking to minimize the space between the product cards and also connect the end cards of each row to the sides of the page! (for mobile view)
Thanks,
Omer
@omero , Hope you are doing well.
could you please share your store URL?
1 Like
@omero , Please try by adding below line of CSS code at the end of your base.css file. The below CSS is used for the remove the spacing.
body .card--standard>.card__content .card__information{
padding-top:0;
}
JFYI, if we remove the side spacing then it’ll be display like attached screenshot:
1 Like
Hi! Thanks very much, this code allowed me to remove the white space between image and title.
Could you also help me with connecting the end cards of each row to the sides of the page
my store url is: designsfordivine.com
Thank you!
@omero for remove side space add below CSS code.
body slider-component.page-width{
padding:0;
}
1 Like
Thank you! it did work for featured collections on homepage. However, it didn’t work on collection pages in mobile view, could you help me with that?
okay, removed the previous one and I’ll write CSS for the both pages in one CSS. Please use below line of CSS code.
@media(max-width:767px){
.collection.page-width,body slider-component.page-width{
padding:0;
}
}
Hello,
After adding this code, I have the problem that you can move my collection page in mobile browser to the left and right with one finger. When I swipe through the product photos to the left the whole page moves to the left, leaving a gap on the right side.
Also, add the below css after adding the above one.
.collection.page-width .gf-actions{
margin-left: 0;
margin-right: 0;
}
Hello, thanks for your response.