Explain box margins

I don’t get it…why is this happening?

I have set things up as I would have thought to do…and in the past it worked fine. Made a slight adjustment and something to me that seems bizarre is happening.

This is how it looks in the builder. I have two icons on the left and right side of the text element. All of them are inside of a containing group.

In the responsive view I see the explain box margins…I have no idea why the left margin is based on the text current date ( it is set to be a center align) but the right margin is the Icon Arrow Forward.

Why is it not that the left margin is the Icon Arrow Back?

This is really strange as no matter where in the group I put the Icon Arrow Back it is somehow not being recognized as the Left Margin “comes from” reference element. Certain times the arrow was actually being used as the Top Margin “comes from” reference element despite being placed at the same X coordinates as the text element.

This is the result on screen

This is after some alterations:

I set the width and height of the icon elements to be the same. I spaced them from the sides of the containing group equally. I then placed the text element centered vertically and centered horizontally.

I am mostly confused about why it is that the Left margin is coming from the text element and the top margin comes from the Icon arrow back.

In my mind it should be that the left margin comes from the icon arrow back if the right margin comes from the icon arrow forward and everything is centered and spaced evenly.

And here is what happens when I make the Icons a fixed width

It somehow changed the spacing of the Right Margin.

Is there any place that fully explains the responsive view editor that goes into great detail to help explain situations like this? I’ve spent the last two full days researching and watching everything I can, reading all forum posts and at this point feel really stuck because I’m seeing things that just seem strange to me.


After playing around more I am even more confused and frustrated.

My math is correct and my assumptions of coordinates can’t be wrong.

My blue container “Group Month Head” has a fixed width of 770px. The Icon Arrows have fixed width of 50px. The Text element has a fixed width of 630px. I have placed the Icon back 10px from the left side of the Group Month Head.

Using simple math (10+50 = 60) I then added 10px to this (60+10=70) to place the text element at X coordinate of 70. Then adding the width of 630px to 70 we get 700px.

From here I spaced 10px from the right side of the text element to place the Icon arrow forward at x coordinate of 710. It has a width of 50px so we get a total of 760px which should leave a 10px space between the Icon arrow forward and the right side of the container group “Group Month Head”.

Why would I have a right margin on text element of 7px and and left margin of 7px on the icon arrow forward?

This makes no sense to me.

Here’s a recent bubble webinar on responsive design:

Maybe this will help you clear up your app.

Thanks for the link. I believe I watched it a couple of times already and still not able to figure it out.

I’m not sure if it is because the editor is calculating the border radius of the elements, which could potentially lead to 3px loss. I’m curious if there is some idea similar to that, which may be a sort of design rule to follow.

You’re welcome!

Good luck with the project, I hope you get it solved soon.