Responsive design with Blocs

I’m having trouble with responsive design.

I’ve looked on the Blocs ‘knowledge base’ and on here and have Googled the topic, but can only find very scant information. Hoping some of you can help me…

I realise that I can change classes at different breakpoints to set padding, the size of boarders, text etc. but I can’t find any way to reorder elements for different screen sizes – i.e. two columns side-by-side horizontally would stack vertically on a phone. That seems like vary basic functionality to me, and I can’t believe there’s no way to do it!

I’ve seen on some YouTube tutorials for previous versions of the app that people were changing the breakpoint view and resizing elements, which would only apply then to that breakpoint. But if I try that it always resizes the element globally, for every breakpoint, so either that feature has been retired or I’m doing something wrong.

For now I’ve found a very inelegant workaround which is building blocs for various screen sizes and setting them to show or hide based on the viewport, but that’s resulted in a hugely long page in the app with four separate versions for each element on the page – it’s bonkers! Surely there’s a better way…

I hope I’m missing something simple here so any advice would be greatly appreciated!

Many thanks in advance…

I recommend checking out the knowledge base post on columns.

3 Likes

Have a play with this and when selecting different breakpoints, watch the setting on the right panel.

column-example.bloc (22.1 KB)

1 Like

May be you can order them with flex.

1 Like

Thank you all! I’m kinda getting there now.

@Norm that post was helpful, especially the part about inherited size. I am still struggling with setting attributes at different breakpoints – it still changes globally rather than restricting the change to just that breakpoint. Unsure if it’s me doing something wrong or if there is a bug in the app…

@pumpkin thanks so much for sharing that example, I’m still playing around with it but I think I understand what you’ve done there.

@Paul That may be the answer! I have experimented with flex containers and had some good results by putting my content into cards…

Thanks so much for your help – website is finally finished and looking great (to me), and most importantly my client is very happy. I’m so impressed with Blocs, it’s a joy to use and I’m now trying to convert my friends away from Webflow etc. to your software. Thanks also to @pumpkin and @Paul for your input – that a great resource this forum is!

3 Likes