Hey earlier, i asked how to change my reviews section to scrollable for mobile, but now i want it to be scrollable for both mobile and desktop, here’s the code i used for mobile:
@media(max-width:767px){
#shopify-section-template–17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid–uniform.grid–flush-bottom{
display: flex !important;
overflow-y: auto;
column-gap: 16px;
}
#shopify-section-template–17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid–uniform.grid–flush-bottom .grid__item{
min-width:calc(100vw - 40px) !important;
}
}
store link:https: //8c2dd1-3.myshopify.com/
Hello,
Please try below css.
Add below css before your mobile review block scrollable css.
#shopify-section-template--17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid--uniform.grid--flush-bottom{
display: flex !important;
overflow-y: auto;
column-gap: 16px;
}
#shopify-section-template--17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid--uniform.grid--flush-bottom .grid__item{
min-width: calc(40vw - 40px) !important
}
Hope it will work for you.
Thank you
Hello @sondreskskfsghj ,
You can use this code for all devices
#shopify-section-template--17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid--uniform.grid--flush-bottom{
display: flex !important;
overflow-y: auto;
column-gap: 16px;
}
#shopify-section-template--17760203178306__c7f62bd3-b196-4e0f-97df-372d5caaf2b0 .grid.grid--uniform.grid--flush-bottom .grid__item{
min-width:calc(100vw - 40px) !important;
}
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
hey, your code worked however, i dont have anything to navigate with “scroll”, do you know how i could add some arrows like this to it?
thanks
