I have a problem when it comes to grid responsiveness in mobile. Basically I need to switch the grid to flex so that the loop animation works, but the problem occurs when I switch to flex, the icons that are in the grid, i.e. the logos, get too small. Here I will offer you both an image and a read only so you can see how the display should l look
[LINK] Read Only
Hi there,
For managing transitions between grid and flex layouts in responsive designs, you can use Webflow’s breakpoint system to control layout changes. Here’s what you can do:
The Base (Desktop) breakpoint allows you to set your primary layout, while Tablet and Mobile breakpoints let you adjust the layout for smaller screens. To control logo sizes in flex containers, you can use the max-width property on the image element and combine it with flex-shrink to ensure proper scaling.
For smooth transitions between layouts, consider using CSS grid for larger screens and switching to a flex layout at smaller breakpoints. You can preview these changes in real-time using Webflow’s preview mode and device-specific views.
Check out our guide on responsive design fundamentals here: https://help.webflow.com/hc/en-us/articles/33961293397779
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
