Responsive - right structure?

Hi all,

I am building my very first application in Bubble. So far so good and I’m getting pretty satisfied with the result. However, we started to create the pages in responsive. I’m not sure if we have the right structure, for example use of groups so scaling goes well. Also, we would like to create some space at the left and right side on desktop and tablet version so it feels more like the left and right elements belong to each other. I don’t thinks dragging and dropping the elements closer together is the right way to do it. What is the best way to do it?

Her is our project: https://bubble.io/page?name=index&id=backup22-10-2016&tab=tabs-1

Any other tips and tricks? Very welcome!

Arjuna

Hi Arjuna,

I’ve been doing a lot of responsive work on my app recently, playing with implementing grids that collapse and expand on each other etc, such as what’s used building websites with CSS traditionally. It’s been quite the challenge!

What I recommend and wish I had done with my first bubble app’s design is build from the smallest viewport up.

So start with your mobile design, and design the rest in steps (tablet, desktop, and beyond if you so wish).

I’m still working on how best to do this in a replicable manner, so right now my advice is very general. Apologies.

That being said, to answer your question more directly in regards to having whitespace on either side, I would contain elements in groups that have a max-width or fixed-width. Try that and see if it helps.