Mobile Clothing Shop

Site URL: https://www.rowensdresser.com/shop

I helped design a e commerce site for a client. On their shop page, when I am on my mobile only shows one item at a time vs when I am on a laptop it shows three items at a time. Is there a way to add code to the site to have the mobile page show three items across instead of just one item at a time where you have to scroll and scroll to see the products for sale? It just seems so tedious there has to be a better way. I am guessing since it is a mobile responsive design that is how it is laid out but I am wanting something that showcases more items than one. 

The website is rowensdresser.com Any help would be greatly appreciated! 

Thanks, 

Abby 

Site URL: https://www.rowensdresser.com/shop

I am looking for someone who can help me with coding on an e-commerce site. On their shop page, when I am on my mobile only shows one item at a time and you have to tediously scroll and scroll to the next product VS when I am on a laptop it shows three items at a time. I know it's responsive design BUT Is there a way to add code to the site to have the mobile page show three items across instead of just one item at a time?

Any help would be appreciated. 

Thanks, 

Abby

On 10/7/2021 at 2:43 AM, abbarrella said:

Site URL: https://www.rowensdresser.com/shop

I helped design a e commerce site for a client. On their shop page, when I am on my mobile only shows one item at a time vs when I am on a laptop it shows three items at a time. Is there a way to add code to the site to have the mobile page show three items across instead of just one item at a time where you have to scroll and scroll to see the products for sale? It just seems so tedious there has to be a better way. I am guessing since it is a mobile responsive design that is how it is laid out but I am wanting something that showcases more items than one. 

 

The website is rowensdresser.com Any help would be greatly appreciated! 

 

Thanks, 

Abby 

Add to Design > Custom CSS

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

@tuanphanThank you thank you thank you!!! This solved my problem1!!!