Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Product: Layout - Change items per row (Mobile)


oddthing

Question

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

12 answers to this question

Recommended Posts

  • 1

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.

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
  • 1
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.

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

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
  • 1
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
  • 0
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
  • 0
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
  • 0
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.

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
  • 0
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.

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
  • 0

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
  • 0
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.

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

Create an account or sign in to comment

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

×
×
  • Create New...