"Apply a max width" on the page level

Why isn’t the “Apply a max width” option available for the page level?

I’m building an app with “Preset page width” set to “Mobile”.

When the page is stretched, i want everything to be stretched but to a certain degree (The same idea as “Min width” to limit the width when shrinking the page).

(i don’t want to make it into a fixed width, i still want the responsiveness)

Now, i know you can set a max width on each element separately, but there’s 2 problems:

  1. i want to set it on the whole page, without needing to to set each element

  2. on the element it can only be done when the element’s alignment is set to center in the Responsive View, otherwise, it will stick to the far edges with the same margin size regardless of the Max width setting.

Which is odd, because what if i want to have elements stick to the Right or Left, but have the margins size increase when the screen gets stretched?

1 Like

I do this on one of my apps. The key is to put all your elements in one parent group (I call it Page) and have that group have a max width. It’s pretty straightforward and seems to work fine, if I’m understanding your need correctly.

2 Likes

That’s smart buddy!

Hope it doesn’t interfere with anything else down the road.

But you agree enabling this feature on the page level would make life much easier?

The challenge with making it on the page level is it prevents the ability to do some of the other things that are fairly common, like a stripe that spreads across the page. In my designs, I have several colored sections than span the entire width, but I only want the “content” to expand a certain amount. In the world where the page level has a max width applied, I’m not sure how I’d achieve the effect.

My two cents: there are more important things for the Bubble dev team to work on, considering there’s already a viable solution that’s relatively painless.

1 Like

Does anyone know how to do this if I have two blocks of content; a menu on the left which is a floating group, and a block on the right hand side which are my product tiles, in a repeating group set to full list. My menu hovers in place but the products scroll up with the mouse wheel and hide behind my header. When I put these in a group to centre the page, i loose the ability to scroll the product tiles.