Hello, bubble is based in flexbox so you can check how it works for better understand, I can help you if is something small, otherwise I charge per hour hahah
They can be a bit tricky at first, but I promise you that over time, with some experimenting / trial & error, that they’ll make more sense.
Here’s some articles to read that may help:
I can give you my own brief summary though:
Row: Items will stack left to right, and if the screen is smaller, the item on the most right will bump to the next row
Columb: Items will stack top to bottom
Align to parent: Items will appear in any one of 9 nonants, which is similar to a ‘quadrant’ but with 9 squares instead of 4 - think of a Tic-Tac-Toe grid. When you select Align to parent, each child item, be it a group, picture, etc, needs to be assigned to the top left, top center, top right, middle left, middle center, middle right, or bottom left, bottom center, bottom right.
One thing to note, and this is the most powerful thing to note with all of these - all of these group alignment types can be mixed. You may have a group that fills the entire page of type Column. But the header in the columns is itself of type row: items going left to right. And the main picture for this page is in a group that is Align to Parent, and the picture is ‘middle center’, but the group also has a heart for ‘liking’ that is in the top right…etc etc.
I highly recommend approaching this more as a responsive design where you build the page top to bottom to scale beautifully, cleanly, and efficiently. Fixed layout is deceiving in that not all browsers will render it properly, and/or it may ‘break’ when loading on various resolutions not accounted for.
I can’t say this is what I want to hear since it will add weeks to the development, but I am sure you are right about this. Thank you for taking the time to encourage the proper use of these instead of just doing a fixed layout using percentages.
I am designing at 320 width so it’s hard to imagine a case where the percentages wouldn’t work however. It’s a mobile app, not available online and maybe supporting tablets. The responsive engine shows no problems at various sizes since I designed for smallest.
Does that make any difference?
Finally, what about the fact that it tells you not to use different pages with mobile apps but instead tells you to show/hide things? I can’t seem to wrap my head around why that is.
I’ll start reviewing the links you shared regarding the groups and alignments. Thank you for that.
I think where I really go wrong is I change one little thing on one item and the entire layout for the whole page goes out of order and cannot be fixed with the “undo” button. That’s where this is getting a bit ridiculous
This actually really helped. Those links weren’t bad. I had set the index page’s container type incorrectly which screwed me up all the way through as other things were relative to parent.
Going fairly smoothly already doing it the right way.