Why does the of my width of page container not auto adjust between editor mode and preview mode

💬 App Building
1

When I am in editor mode, my container which holds all the dashboard information fills the whole page with margins on all four sides.

The same for a modal located in the heads, it spans the full width of the page.

However when I shift to preview mode and the page width increases, the containers stays as the same with as it was in editor mode, the header also doesn’t take the full width of the page.

Why?

1 Like
4

Hi @random98,

I'd be happy to help, but I'll need a bit more information to better understand the issue you're experiencing.

Could you please share:

  • A few screenshots of the problem, or
  • A short screen recording showing the behavior

Based on your description, it might be related to one of the following:

  • The page or container Max Width setting
  • The container's Auto Width or responsive layout configuration
  • Another layout or sizing configuration

If possible, you can also share:

  • The JSON export of your app (if you're comfortable doing so), or
  • A minimal reproducible example

That will make it much easier to identify the root cause and suggest the most appropriate solution.

Once I can see the UI and how it's configured, I'll do my best to help you resolve the issue.

5

Hey @random98, thanks for the detail!

Good news, this is expected behavior rather than a bug, and it's a quick fix. It comes down to your app's Max width setting, which caps and centers the canvas. In the editor it's drawn at that width so it looks full, but in preview on a wider screen the content stays capped, which is what's leaving those side margins. Your header behaves the same way for the same reason.

Here's how to change it:

To adjust the maximum width of the canvas, open the Inspector and update the Max width setting. This setting accepts pixel and percentage values, or you can set it to none so it uses 100% of the viewport. The default max width is 1200px. On desktops, regardless of the value, an 800px minimum is enforced.

More detail in the docs here. Let me know if that does the trick! :folded_hands:

1 Like