Differences between editor and preview

Hi

I don’t understand why this

in the preview becomes this

what I’m wrong about?

Hey @stefano1 :wave:

The reason this is happening is because you are building on a smaller screen and previewing on a larger screen.

You should take a look at the responsive tab. You can set what you want the elements to do there. Setting them all to the same alignment setting would be good.

Or, if you want a quick fix without thinking about responsiveness yet, make your page fixed width. Then review responsiveness later on when you are ready to take on the challenge. :blush:

Here are the best resources to learn about responsiveness. Straight from the creators.

  1. Building Responsive Pages - Bubble Docs

  2. https://vimeo.com/169882386

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

Thanks for answer

no I built and previewed using the same screen size

can you help me?

What @J805 told you is that the page width of your app in the editor (the settings of the main page of your app) is smaller than your screen width, so when you preview your app, if the elements within your page are not set to not shrink, they will expand their width.

So either set these elements with a fixed width (a checkbox to check in your element settings), either ensure they are all centered and will all sharing the same way (same default width for all, and same max width when they will shrink).

Using the responsive tab of the editor you will be able to see how your elements react when the width of the screen changes.

Thanks

I did as you say and I managed to make responsive but the image contained in the floating group instead the floating group does not resize

Why?

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