Product: Layout - Change items per row (Mobile)

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.ProductList-grid .ProductList-item {
    width: 100% !important;
}
.ProductList-grid .ProductList-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

}

14 minutes ago, oddthing said:

Thanks so much @tuanphan! Now works perfect for mobile. 

Is it possible to make it also transitions to two thumbnails per row for tablet?

Thank you 🙂

 

@media screen and (max-width:900px) and (min-width:641px) {
.ProductList-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
}
}

@media screen and (max-width:900px) and (min-width:641px) {
.ProductList-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
}
.tweak-product-list-meta-position-overlay .ProductList-item {
    width: unset !important;
    clear: none !important;
    float: none !important;
}
.ProductList-grid .ProductList-image {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

8 hours ago, tuanphan said:

@media screen and (max-width:900px) and (min-width:641px) {
.ProductList-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
}
.tweak-product-list-meta-position-overlay .ProductList-item {
    width: unset !important;
    clear: none !important;
    float: none !important;
}
.ProductList-grid .ProductList-image {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

 

Thank you very much for your help @tuanphan 

That works 🙂

The only minor issue is the padding down the middle of the thumbnails seems to be larger than everywhere else..but this is not a major issue...Let me know if there is a simple fix - otherwise thank you for all your help.

Thanks so much @tuanphan! Now works perfect for mobile. 

Is it possible to make it also transitions to two thumbnails per row for tablet?

Thank you 🙂

9 hours ago, tuanphan said:

@media screen and (max-width:900px) and (min-width:641px) {
.ProductList-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
}
}

 

Thanks @tuanphan, but it seems to have issues with spacing/scaling the thumbnails when transition to two per row. See attached screenshots 

On 4/20/2020 at 9:50 PM, tuanphan said:

@media screen and (max-width:900px) and (min-width:641px) {
.ProductList-grid.clear {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
}
}

 

@tuanphanHi, is it possible to make the images square, and bring the text closer to the image?

Thanks in advance!

6 hours ago, blackst0nes said:

@tuanphanHi, is it possible to make the images square, and bring the text closer to the image?

Thanks in advance!

If you share link to page in screenshot , we can check easier.

Hi -

I used this code on my website, but there is a significant gap between the photos and the titles on my phone. However, I don't see this when I preview mobile on my laptop browser.

Can you help me adjust this padding?

I attached an image to show what's happening. You can see the website here:
https://chinchilla-aqua-e5lr.squarespace.com/
Password: bougie

Thanks,
Sarah

On 5/5/2021 at 3:31 AM, sarahjane95 said:

Hi -

I used this code on my website, but there is a significant gap between the photos and the titles on my phone. However, I don't see this when I preview mobile on my laptop browser.

Can you help me adjust this padding?

I attached an image to show what's happening. You can see the website here:
https://chinchilla-aqua-e5lr.squarespace.com/
Password: bougie

Thanks,
Sarah

Hi. Products on homepage or which page?

Hi 

I have used the above codes to change the number of thumbnails that are showing in a row from two to one in mobile view. It has worked perfectly except the images are now showing off centre (to the right) when in mobile view. Do you know how to change this please?

19 hours ago, AV-Art said:

Hi 

 

I have used the above codes to change the number of thumbnails that are showing in a row from two to one in mobile view. It has worked perfectly except the images are now showing off centre (to the right) when in mobile view. Do you know how to change this please?

Can you share link to your site? We can check easier