Jump to content

Product: Layout - Change items per row (Mobile)

Go to solution Solved by tuanphan,

Recommended Posts

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 by oddthing
Link to comment
  • Solution

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

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 

 

Screen Shot 2020-04-21 at 9.35.08 AM.png

Screen Shot 2020-04-21 at 9.34.30 AM.png

Link to comment
@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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

Screen Shot 2020-04-22 at 10.51.46 AM.png

Link to comment
  • 2 months later...
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?

image.thumb.png.82361bea5503756774bb3993c98cc6b2.png

Thanks in advance!

Link to comment
  • 9 months later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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?

IMG_0606.jpg

Link to comment
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?

IMG_0606.jpg

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

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.

image.thumb.jpeg.c87fe93cd47cd5cf455450641d7f338c.jpeg

 

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

Screenshot_20210504-132827_Chrome.jpg

 

Edited by satyan
Link to comment
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.

image.thumb.jpeg.c87fe93cd47cd5cf455450641d7f338c.jpeg

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.