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

Items per row on store page

Question

Posted (edited)

Site URL: http://www.summitviewlearning.com/payment

Hi - I'm trying to put 4 items per row on the products page (version 7.1). I've tried the previous suggestions posted in this forum with no change to my site. The image on each product is so large that you can't see the item name when viewed on a regular browser. 

Thanks,

Claudine

Edited by ClaudineM

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Above link doesnot exist


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 (promote the establishment of 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
  • 0
Posted (edited)
On 5/16/2020 at 3:07 PM, tuanphan said:

Above link doesnot exist

Sorry - I just edited it (payment is singular). I changed the store to just have two items for now, but I'm still interested in knowing how to fix this. At the very least I'd like to make the images smaller so you can see the item name on the page.

Edited by ClaudineM

Share this post


Link to post
  • 0
8 hours ago, ClaudineM said:

Sorry - I just edited it (payment is singular). I changed the store to just have two items for now, but I'm still interested in knowing how to fix this. At the very least I'd like to make the images smaller so you can see the item name on the page.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-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 (promote the establishment of 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
  • 0
On 5/18/2020 at 4:15 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
}

 

I tried that and nothing changed. I added two test items without images attached to see whether the item width would only change with more items available to be displayed. 

 

Any ideas?

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