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

Product: Layout - Change items per row (Mobile)

Question

Posted (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 by oddthing

Share this post


Link to post

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

}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0
Posted (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 by oddthing

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...