Hi,
this is probably a very basic and maybe even dumb question, but I just can’t figure it out.
I’m working on my first bubble website and in the editor it looks pretty good:
But then when I check it in the editor, everything is positioned differently:
How do I change it so that it looks the same in preview as it looks in the editor?
Thanks in advance!
Hello,
Thank you for posting on the forum.
It seems that the behavior you are experiencing is related to responsiveness. To make your page fixed width instead of responsive you can select the option ‘Make this element fixed-width’ from the page property editor.
Responsiveness is definitely one of the trickier parts of Bubble at the moment, and our team is actively redoing our responsive engine so that it’s more powerful and easier to use. In the meantime, Bubble’s responsive engine performs best if you give it some hints as to what elements should move together or stay relatively close to each other as the page responds to various screen sizes. The best way to do this is through grouping your elements into those groups of elements that should stay together. Having a “parent group” will also let the various inputs know how they can and can’t expand relative to their parent.
Ultimately, you’ll need to use groups to ensure that elements are properly placed. Elements placed within a group will move relative to each other while the overall group moves relative to other elements on the page. I recommend checking out this write up about Building Responsive Pages, or there are several YouTube videos that could be very helpful to this end:
This topic was automatically closed after 70 days. New replies are no longer allowed.
