Alignment issues of images after clicking Preview

Need help Responsiveness
1

Hey guys,

Fairly new to bubble - I’m having problems aligning my images - whenever I click “Preview”, they are not in the same place (or sometimes smaller/bigger) than how I align them in the bubble editor.

For example: I’ve created a shape in adobe illustrator and imported it to bubble, either as a SVG or GIF image (Visual Elements → Image → Static image Upload) or via HTML code (where I pasted the SVG code directly from Illustrator into the HTML bubble input).

Both work in that I can see the image in Bubble and move it around / align it to where I want it and in the correct size. But then, when clicking “Preview”, the image has moved from where I’ve placed it (up, down, sometimes it’s smaller).

This is how it looks in the editor:

Screen Shot 2021-02-21 at 7.29.00 PM
Screen Shot 2021-02-21 at 7.29.00 PM2256×1442 297 KB

This is also in the editor, but zoomed out (I want the shape to be large and across the background as seen there):

Screen Shot 2021-02-21 at 7.29.22 PM
Screen Shot 2021-02-21 at 7.29.22 PM2258×1442 224 KB

This is how it looks when clicking preview:

Screen Shot 2021-02-21 at 7.29.40 PM
Screen Shot 2021-02-21 at 7.29.40 PM2796×1528 397 KB

I have played around with using fixed widths and non fixed widths (no resolution, but I don’t fully understand those settings yet).

Do you guys have any suggestions? is there a better way for creating custom shapes in Bubble that respond and behave better?

Thanks for your help :slight_smile:!!

2

Responsive editor and fix alignment of the element

3

Hey Chris,

Thanks for your help! Just tried out the responsive editor (at the top left?), this is what it looks like when I select the shape in question. It is also misaligned in that view (it starts slightly below the text, it should be level with the text), but how can I now change it?

Screen Shot 2021-02-21 at 9.04.48 PM
Screen Shot 2021-02-21 at 9.04.48 PM2688×1458 466 KB

4

Hi

What you see in the editor is not what will be shown in a browser, because people will have different types of browsers and different sizes.

What you’re experiencing is the Responsive nature of what your editor design looks like in the real world.

That’s why it is vital that you use both the editor and the Responsive editor.

There’s much to learn, so I would suggest googling for videos on the topic. They helped me.

5

thanks andrew! will dive deeper into those topics.

6

Hello!

Long watch but worthwhile: