New Responsive Engine: Min width and Max With not working as expected

I’m really confused by the min width and the max width of the new responsive engine.

I have page set as a column centered (980). I then have a container set as a row with a min width of 320px and the max width of 960px and the alignment centered. I would assume when I have the screen stretched the container would stretch to the max width keeping the container centered. Right now it stays at the minimum width of the container and doesn’t expand. (see image 1 and 2) When I select the horizontal stretch alignment it goes to 960px but is left aligned when stretched and not centered. (see image 3)

Any help would be appreciated.

3 Likes

Try percentage instead of px, you can put the min width as 100%. So it’s going to be a 100% of the parent

1 Like

You have not right setup. Min width its not just min but also default, element dont need to expand to max width because it hasnt content inside. If you want element expand close to max width as possible you need change its aligment (in this case Horizontal aligment) to strech (in this case Horizontal strech) then it will get max width if possible.

@fredonook Ahh I see…min-width is default. It would be nice to be able to select default to be max width.

If you notice in my third picture I selected horizontal stretch like you are suggesting. It goes to the max width but left aligns. Why doesn’t it center?

Attach pls layout screenshot of gray group which you try to center and their parrent group layout screenshot. Cos there is must be mistake in one of those groups. You setup parent group correctly? As you know in flexbox container group setup change behaviour of child items.

Page is set to column with a width of 960

Group with grey BG is set to horizontal stretch with a max-width of 960px

Here is the preview results. Why does it left align?

I discuss with another man that have same issue. I build solution Spa-structure | Bubble Editor Check it @kevin32

I believe the container is left aligning inside of the parent column (your page set at 960). Since you are using a Row container, and the grey box is the first item in the Row, it sends it to the left. If you change the type of container to both be columns, you might get the result you’re looking for.

@fredonook Your shared link says I don’t have permission to access.

That isn’t how it should work, right. The row container is defining how the children should behave not how the container itself should behave inside it’s parent container (column).

Hm, it would help to see your Element tree too. I’m doing my best to understand all the changes myself.

Here I made a quick public app to demonstrate. @yaggienick you can mess around in it.

I agree with you that there is issue with page container, another containers work well. At first im not understand your issue clear. But my setup fix this issue and you can use it before page container will be fixed. Sorry for i forget change privacy setting in my setup.

You can see:
4k resolution


fullhd resolution
320px width

So the issue seems to be narrowed down to just the way overall page container is behaving.