I would like for this grid section on homepage to scroll on mobile view and not be stacked, can anyone assist?
site url: https://afca7f-2.myshopify.com/
Hi @blakelyhi
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.grid__inner {
flex-direction: row !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: scroll !important;
}
.grid-item__inner {
width: 330px !important;
}
.grid-item.grid-item–width-33.grid-item–text-left {
margin-right: 40px !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like
That’s a close solution but the spacing of the grid images went away. How would I add that back in to mobile?
That helps for that one section only - the rest of the grid sections on mobile are still touching or overlapping… I’ve tried adjusting the values to match the grid width’s but it doesn’t change them.
Hi for some reason every other grid section that this code applies to, the spacing is not right - no matter if I enter in the item width 50/66, etc. Can you please help?
Hi can you please help me achieve this with the multi-column sections on product pages? The “Why I made this” section. I’ve been trying to target using your code and tweaking it but for some reason it’s not working. I was able to resolve my request below, by the way. Many thanks…site url: https://afca7f-2.myshopify.com/, pw: outdoors