Buttons, Text, Icons, etc are not in same spot in preview as they are in the editor

[tvmeints]

I’m having problems with my buttons, icons, and even text not showing up where they are located in the editor. I’ve tried selecting ‘make this element fixed width’ on and off and it doesn’t seem to work.

Attached below are some pictures of my problem. Picture 1 is in the editor and Picture 2 is what it looks like in preview mode.

Picture 1

Picture 2

Notice how the pencil or edit icon was overlapping the picture in the editor but in preview mode it wasn’t. Along with the Buttons, Text, etc they were not in the same spots.

[cmarchan]

It is Bubble’s responsiveness functionality that needs to be managed.

A quick “fix” for the above. Experiment with grouping the pencil icon and the button together by selecting them both while pressing shift … then right clicking … and then choosing “group elements in a group”. This resulting group make it fixed width and see the result.

This is a pretty good tutorial video that reviews these concepts for a specific use case > Responsive Grid Layout | Bubble.io Tutorial

[cgthornton]

I had the same problem but discovered my error. Seems I had rogue text elements on the page. I opened the Elements Tree and noticed several very small unwanted text elements on the page. One of them was “edit me”, I suppose that is leftover from a Bubble template