Product: Layout - Change items per row (Mobile)

Site URL: https://oddthing.co.nz/

Hi there,

I'm looking for some help with the number of product thumbnails displayed per row on my store.

I have created a product page which has three thumbnails per row. Currently the three thumbnails reduce to two thumbnails per row when viewed on mobile. 

When viewing on mobile, I would like this to change to one thumbnail per row & ideally two thumbnails per row for tablet.

Is this achievable with custom css?

Thanks for your help in advance! 🙂

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 🙂

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

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 

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

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

Hi - I am having the same issue. When rendering on my mobile phone, the photos aren't using the consistent square dimensions but only the original dimensions of the photos. As a result, the ones that aren't the same square dimensions have weird padding between each piece vertically.

Also, the photos are not horizontally centered in the middle of the page - there seems to be more cell padding on the left than the right side

See the work here -> https://trishlajain.com/work on mobile device.

Thank you @tuanphanin advance!

On 5/4/2021 at 1:31 PM, 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

On 6/10/2022 at 3:43 AM, satyan said:

Hi - I am having the same issue. When rendering on my mobile phone, the photos aren't using the consistent square dimensions but only the original dimensions of the photos. As a result, the ones that aren't the same square dimensions have weird padding between each piece vertically.

Also, the photos are not horizontally centered in the middle of the page - there seems to be more cell padding on the left than the right side

See the work here -> https://trishlajain.com/work on mobile device.

 

Thank you @tuanphanin advance!

 

 

Can you check url? I don't see images on the page