The design goals section of this page and the cards grid below it looks good on desktop but is totally breaking on mobile and turning into a horizontal scroll. On tablet, the design goals section doesn’t have the same padding as desktop and the icons don’t center align with the cards. Any help would be appreciated.
Hi,
Sorry I’m a bit new to webflow myself but from what I can understand, what you need to do is in the “grid settings” add or delete columns in the various views, mobile and tablet, and the content should auto adjust itself. For example, in mobile you can delete a column and all the material will arrange itself into one column instead of two, which is much more suitable for the phone. Since the changed cascade down from PC to phone, making this change in mobile view won’t effect the PC view. Regarding the padding, you just need to set it on each view, and make sure you add some outside padding (right not it looks like you only have inside padding on the design goals) so it doesn’t fly off the page. For me the icons were center aligned with the cards so no problem there, just need to add some padding to the outside. If you add this in the PC view it should add it to all the other views.
Hope this helps in some way.