Help with header elements extending onto new line

Need help Responsiveness
1

Very new to bubble, have been playing with groups and fixed width settings but no matter what I do I can not seem to get this part to work. It seems to keep the width of the hidden element from as far as I can tell. I am also aware of the trick to use a shape in between elements to possibly remedy this. I have tried placing a transparent shape in different spots but that does not seem to work either.

Any help is greatly appreciated!

header1
header1562Ă—668 7.55 KB
header2
header2480Ă—520 6.03 KB
layout
layout1450Ă—632 34 KB

2
3

Have watched most of the guides available on youtube.

4

This one should be worth your while. It is a 2 hour workshop full of gold nuggets.

5

I should mention I have specifically watched this one. I think I need to add a shape in somewhere but I have tried playing around for many many hours and cant seem to get anywhere.

6

Build a new page from scratch and test at “every” step

7

The video projects one main concept:

Responsiveness is about a good structure. Once your”play” by the way the responsive engine works you should be good to go.

8

I have built and rebuilt this page many times and am currently trying again as we speak. Any help is appreciated, thanks for the try though!

1 Like
9

Things you already know:

  • do not stack elements over each other
  • do your math
  • start from the absolute foundation (like a house) and build it up from there
  • do not worry about the height of your page in the editor
  • etc etc

Here another excellent video showing how to build a structure (this one is more of a walkthrough than a tutorial):

10

Sounds good in theory yes, bubble does have some weird charictericts that require work arounds that not even someone experienced with responsive would be aware of. Like I said multiple times I think I need to add a transparent shape in-between two elements as seen on the public bubble app Meta_public | Bubble Editor. I will keep playing but if anyone can provide any insight into why this is happening would save me a bunch of headache.

11

That looks like a good video, ill watch. Thank you!

12

Oops … I actually meant this one (but the prior one is very good too)

13

Thanks

14

Watched the video but I am still struggling to solve this. Anyone that could help me understand what I need to do to make this work would be awesome!

15

Another possible assist:

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