Preview Mode Doesn't Look Anything Like Development Mode

When I preview my application it always goes across the entire width of the page… I don’t know why and can’t find the setting anywhere… please advise what the problem is and why it doesn’t look like i’m building it in development mode.

Vs.

I assume that the top image is the preview? Have you got responsive engine turned on?

Yes correct. Top is the Preview with all the errors.

I’m not sure but according to the docs on this i’m supposed to "You should first activate the responsive rendering at the page level. Double click on the page and check the ‘Enable responsive page rendering engine’ box. " but the option isn’t there for me?

https://bubble.io/chapter/building-responsive-pages-1460743187240x663465764401971200

Can you provide a link? This doesn’t right. Maybe create a new page and see if the settings are available.

Blank (brand new page) and here are the settings I get. It’s bizarre.

Even my pop up for login/signup looks great in the develoment mode but looks like nothing in the preview mode…

My settings seem fine. ?

vs.

With a reusable element you must set the size on page level as well. I learned that the hard way :slight_smile:

1 Like

I checked that already and again it all looks fine.

Is that screenshot from the reusable element or on page level? The easiest to see is if you can give a link to the app

If you check any of the pages, same rendering issue occurs… can’t figure this out. looks terrible in preview.

You must set the sizing in the header element
Popup element sizes

As it is in the header element

Figured that one out thanks!

It’s just that every other page also has an issue with the development vs. preview mode with no hope to understand. ?

Any thoughts on this anyone?

I have exactly the same problem and was going to post a topic about it :slight_smile:
Like you, I don’t see the option “Enable responsive page rendering engine”.
Here is an example of the difference between development mode and preview mode for me: the blue circles below the image zone (which I used to build a slider) are way more distant in the preview mode than how I arranged them in the development mode.


So, I will wait as well any ideas to solve this problem.

I’ll have a look a bit later, just a bit busy at the moment

I’ve got no idea about the page rendering. The best will be to report a bug on this one.
Place your blue circles in a group, play around with the settings and see what happens :wink:

Ok, I will make a few more tests to see what happens, while waiting for new ideas on this problem.
I already placed the circles in a group, but it didn’t change anything.
Thanks anyway for trying to help :slight_smile:

Whats your settings on the group? Fixed width, max width, etc?

Thank you very much @raymond for this suggestion, I just checked the box “make this element fixed-width” and it solved my problem with the blue circles, they are now at the same place as in the development mode. I hope it works also for you @JustinC

1 Like

You should have seen me playing around in your app :slight_smile:
I have placed some elements in a group (Ctrl & click on each one, right click, group elements together). There’s a message for you above them.

Hope this helps

On what page?