Made in Webflow

Perfect masonry grid with slider on mobile

site profile thumbnail


On the last project that I was developing, I got a challenge. The client deliver to me a design where testimonial sections were built using a beautiful masonry grid. The challenge appear when the desktop version was almost done, and I got the design for mobile with the slider in the testimonial section. The easiest way to deal with it is to manage the responsive masonry grid on desktop, tablet, and landscape. On the mobile hide this solution and come with the slider which is hidden on other devices. Problems with this solution: The solution proposed above comes with a list of problems that I wish to avoid: accessibility issues doubled content, and mess in the code. This is why this solution was created. I think this could be very useful for a lot of projects done in Webflow. I made it using Webflow forum resources about sliders and masonry grid combing them together. Tutorial: Support :
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.