Forum Academy Marketplace Showcase Pricing Features

Alignment Issues between Design View and Preview

Hey there! I’m new to Bubble and hope you can help. I’m creating a simple form to be filled and I can’t seem to get the preview alignment to look like it does in design view. I’m not in responsive mode, just the standard view. I’ve attempted to make groups vertical, horizontal, include everything on the page, cut it up into sections, etc and I’m not getting anywhere. Virtual beers on me for some help!

Thanks,

Jason

Hi Jason,

Without knowing what you’re trying to do, and what you’re currently doing, nobody can offer much help here…

But obviously this is to do with your responsive settings… (are you using the old or the new responsive engine?).

In any case, getting to grips with responsive design always takes a bit of time.

Feel free to post some screenshots explaining what you’re doing, and what you’re tryign to do on here if you want some more specific help.

Hi Adam. Thanks for the quick reply. I’m using the free version and just started a few days ago so I suppose it would be the newest engine. Here’s an example of what I’m seeing:

Design View:

Preview Mode:

Page Info:

If i click “Make this element fixed-width” the alignment works out in the preview mode as expected, but I don’t understand why.

I assume you’re talking about the "Covid Vaccination Status’ bit not aligning with the other headings?

It’s to do with your responsive settings, specifically for the margins and alignment.

Without seeing your responsive settings in the responsive editor I can’t say for sure, but I’m guessing you need to set the fixed margins to ‘Left’ for that particular element in the responsive editor.

I see you’re using the old responsive engine at the moment - which can be a lot more confusing than the new one. So, as you’re new to Bubble, rather that trying to learn how the old engine works I’d recommend switching to the new engine as soon as you can, as that’s where the future of Bubble design lies (no point in learning how to use two different engines).

That will make it much easier in the long run.

But, if you want to stick with the old engine for now then, as I said you’ll need to fix the responsive settings.

If setting it to ‘Fixed Width’ works then I’d suggest just doing that (in the old engine that often makes things work more as expected), otherwise play around with the fixed margin settings as I mentioned above.

Feel free to post some screenshots in here if you’d like someone to give some more detailed help.

Thanks for the help Adam. I’m just going to allow fixed width to do it’s thing for now until I get a little more comfortable. Once I get the logic down I’ll come back to this and figure it out. I appreciate your help immensely! If you have any ideas on how to build a radio button with three entries, one of which is a text input. Ie, Choice 1, CHoice 2, or Choice 3 which would allow you to type a custom response. It’s this last part that’s throwing me for a loop.

Happy New Year!

This topic was automatically closed after 70 days. New replies are no longer allowed.