@media only screen and (max-width:767px){.products.collection-content-wrapper .list-grid {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));grid-column-gap:2vw;grid-row-gap:4vw;padding:0;}}
On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.
Question
MiridiosII 6
On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.
Link to post
Top Posters For This Question
2
2
1
1
Popular Days
Dec 23
2
Jan 10
1
Dec 20
1
Jan 2
1
Top Posters For This Question
SMXTH 2 posts
tuanphan 2 posts
MiridiosII 1 post
sundayclubapparel 1 post
Popular Days
Dec 23 2020
2 posts
Jan 10 2021
1 post
Dec 20 2020
1 post
Jan 2 2021
1 post
Popular Posts
MiridiosII
@media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-
5 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment