oddthing Posted April 17, 2020 Share Posted April 17, 2020 (edited) 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! 🙂 Edited April 18, 2020 by oddthing Link to comment
Solution tuanphan Posted April 18, 2020 Solution Share Posted April 18, 2020 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; } } oddthing and AV-Art 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
oddthing Posted April 20, 2020 Author Share Posted April 20, 2020 (edited) 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 🙂 Edited April 20, 2020 by oddthing Link to comment
tuanphan Posted April 20, 2020 Share Posted April 20, 2020 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; } } AV-Art 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
oddthing Posted April 20, 2020 Author Share Posted April 20, 2020 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 Link to comment
tuanphan Posted April 21, 2020 Share Posted April 21, 2020 @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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
oddthing Posted April 21, 2020 Author Share Posted April 21, 2020 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. Link to comment
blackst0nes Posted July 18, 2020 Share Posted July 18, 2020 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! Link to comment
tuanphan Posted July 18, 2020 Share Posted July 18, 2020 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sarahjane95 Posted May 4, 2021 Share Posted May 4, 2021 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 Link to comment
tuanphan Posted May 6, 2021 Share Posted May 6, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AV-Art Posted June 10, 2021 Share Posted June 10, 2021 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? Link to comment
tuanphan Posted June 11, 2021 Share Posted June 11, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
satyan Posted June 9, 2022 Share Posted June 9, 2022 (edited) 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 Edited June 9, 2022 by satyan Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment