Element placement/display issues

When I preview my app, I have a number of elements that don’t line up, or have shifted from where I placed them, and where they show up in the development part of the app. I have tried moving them around and have to put them out of alignment of where I want them for them to show up in the correct place in the preview. any ideas on how I can fix this issue? I have provided screen shots below.

At the responsive engine view, can you share with us images of the margins?

If you’re not familiar with what I’m saying, check this quick video made by the Bubble founder.

It wont let me open in responsive view as the app is set at fixed width

Try disabling the fixed width, you can enable it back later.

Is this what you are after?

@vini_brito attached are sceenshots showing the margins and the preview. I am unsure how to change the margins, if you can help me with fix them up and how to change the margins I would appreciate it.

How exactly do you want them to be? I’m not understanding what is misaligned with what.

If you look at the top preview in the last message you can see that there are big gaps in the list under physical characteristics. I am wanting to have it look more like the list on the right side, where the gaps between the headings are essentially even and well spaced.

I’d experiment with grouping the elements differently a few times, Bubble uses a lot of the grouping we do to position the elements.

yeah I have a lot of stuff in groups, in fact all the headings etc are in groups. I think it may just be the width/margin of the groups.

May be, but also which elements are in what group also plays a role in this sometimes.

Hi @justincswork another thing you can do is click “Explain box margins”:

Currently that button is “Hide explanations” for me because I activated it. Click the element then click “Explain box margins”. It will then show what is going on around your elements and why.

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