Make Grid collection scrollable on desktop

Store Design
1

i have a grid collection of 4 cards on the desktop that are scrollable on mobile. Is there any way to make them “carousel/scrollable” on desktop also? Looks goofy with the odd 3 and then 1. Theme is Hyper 1.3.3 by FoxEcom who couldn’t help with this - See attached

DT Need
DT Need1920×1200 282 KB

2

Hi @upwardpacific

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Hey @upwardpacific, in your theme.css, add this code @media screen and (min-width: 990px) {
.collection .product-grid,
.collection__products .product-grid,
ul.product-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
}

4

hey @upwardpacific try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
.grid-banner__inner.f-grid.f-grid--gap-2xs.f-grid-auto-rows--auto.f-grid--row-gap-2xs.swipe-mobile__inner {
    display: flex !important;
}
}
</style>

image
image1277×780 145 KB

5

i just went with the odd 3. This will work out better. Thanks for the help!

6

i just went with the 3. I think this will work out better. Thank you for the help!

7

I changed things up a little. Thank you!