How to create responsive pages, layouts in bubble.io

hi bubblers,

How i can create a responsive website/ web app in bubble.io. Actually i am finding this task difficult and time consuming to do.

What are the first and last steps you would and take to start designing your web app and making it responsive at the same time. Step by step procedure would be very helpful for me and other thousand bubblers as i think this is the area where consumption of time is very much.

So please be descriptive and your best practices and advices.

thank you
Priyanshu goyal
Founder at nocodeify.in

Hi there, @Priyanshu-Goyal… I’m not trying to be a jerk by throwing a bunch of links at you (like a “let me Google that for you” kind of thing), but there is plenty of great content out there on responsive design in Bubble, and you should definitely check some of it out.

https://manual.bubble.io/help-guides/building-a-user-interface/building-responsive-pages

https://medium.com/littlebay/how-to-make-centered-elements-responsive-in-bubble-5f58eb1daae6

Best…
Mike

3 Likes

It’s really about setting up page structure using groups. Once you’ve divided the page into the relative parts, creating breakpoints is straightforward.

Throwing this into the mix - Guide

2 Likes

Thank you so much

1 Like

Thanks greg really learnt a lot from your responsive tutorials on bubble.io & thanks for that awesome ebook.

Thank you all for your contribution, I’m using the new responsive engine and after following and adapting the videos to the new engine i got the responsiveness but I have the problem where I’d like to have bigger pictures in desktop mode, like the ones on the bottom in this screenshot, but I get the upper ones if I make the columns responsive:

While The upper ones are good on mobile as I want 2 columns with pictures of 150 px max but they stay small on desktop while the bottom ones aren’t responsive and stay 4 columns instead of 2:

The main problem is that I can’t have fixed columns AND minimum column width togheter but it has to be variable columns, so they get the minimum width of the image inside.

I tried many things, the only thing that I have to try is changing the column/row/fixed container layout.

I’m using column for index and all the children are like the parent as I suppose that it’s the best option also since I’m aiming mostly at smartphones