https://blunujcmg7q46rtz-26647298248.shopifypreview.com
The above is a draft preview for my website. On desktop, I’d like as it is (Reference 01). However on the mobile version, I’d like the collection list to expand below, i.e. 3 items each row.
An example of what I’m hoping is as seen on the website, "https://scooboo.in/" (or) please refer (Reference 02).
Yes
Go ahead
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.css
@media(max-width: 767px) {
.collection-item {
width: 24vw !important;
}
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly
Let’s continue our conversation in the community. That way, everyone can pitch in and get something out of the discussion.
You’re on point with the idea of having 3 collection items within the viewport – that’s halfway there!
I’m also aiming for the scroller to turn to somewhat of a flex-wrap situation. That is, I have 6 items in each scroller. And I want to see them span across 2 rows with 3 items each. Similar to what you see on this website (https://scooboo.in/).
Thanks a bunch for your response!
Cheers
@nickisusanalex You can try this code
@media screen and (max-width: 999px) {
.scroller__inner {
white-space: normal !important;
}
}
The code you shared pretty much does the job. But I did notice a slight issue with the margins which resulted in unaligned rows – it seems the misalignment originated from the theme’s default margin settings on the CSS.
I managed to work around it using a similar approach as your code with some minor tweaks.
In case anyone else is trying to achieve the same result on the same theme, the following code should do the trick:
@media screen and (max-width: 767px) {
.collection-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.collection-item {
width: 26vw !important;
margin: 0 10px !important;
box-sizing: border-box;
padding-bottom: 20px;
font-size: 13.5px;
}
.container {
padding: 0 30px;
}
section {
margin: 20px 0 0 0;
}
}
Here’s an image of what I managed to achieve.
Thanks again @PageFly-Richard!
