Switch scroll directions when going from desktop to mobile

Going from a horizontal scroll in a repeating group to a vertical scroll based on screen size can be achieved with a little CSS.

Here is the code:
/* Max Width 425px */
@media (max-width: 425px) {
.myCardSwitch {
overflow: auto !important;
grid-auto-rows: minmax(max-content, 100%) !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
grid-template-rows: none !important;
grid-auto-columns: unset !important;
grid-auto-flow: row !important;
gap: 24px !important;
border-radius: 0px !important;
align-self: flex-start !important;
min-width: 0px !important;
order: 3 !important;
min-height: 520px !important;
height: max-content !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
width: calc(100% - 0px) !important;
margin: 0px !important;
z-index: 5 !important;
}
}

Resource: grid-auto-columns - CSS: Cascading Style Sheets | MDN

How to video: https://youtu.be/yrLuf67wWVo

Let me know if you have any questions!

1 Like