Broken responsive settings?

Hello all,

I come from a decent bit of experience with Webflow. Thus, I was quite thrilled to see a responsive control setup (max-width, min-width, etc) virtually identical to Webflow’s here. Unfortunately, it doesn’t seem to work correctly in Composer, specifically, when I align the white base containers to the center.

For example, I’m building a responsive web app to start. This is what it currently looks like with proper responsiveness implemented on desktop. The white base containers are currently aligned to the left. Note the circled areas:

Here’s what it looks like from the mobile view (iPhone; same settings):

Pretty much correct, size-wise. The problem with the first image is that the white base containers only work with the responsive setting when align to the left, for example. I’d like those containers centered for the desktop view and, when I do that, this happens:

The containers shrink back to their min-width rather than staying at their full possible size. Now, I know this has to do with “Align Self” no longer be set to “Stretch horizontally to fill the container width”, but rather, “Align this horizontally to the middle”. But is there a way to align those base containers to the center and have it respect the desired max-width AND shrink accordingly in a mobile view?

So I’m curious. What am I missing here. Do note that the reason this worked in, say, Webflow, is because you would nest containers inside page sections. Those page sections could then be set to align all objects inside them to the center, for example. I don’t see any such functionality here, so I assume page sections aren’t used in composer. There also doesn’t appear to be a setting for the actual “Page” entity itself (the blue field) to align all objects in it to the center.

I’m not sure if this is a bug, or if I’ve failed to take something into consideration, or if it just isn’t currently possible. Any advice appreciated. Thank you!

Hi, if I understood this correctly, there’s couple of ways to tackle this.

The easiest one is to add your “white base Containers” into another Container and make it stretch to the whole page width, but align its content to center. Then your white base Containers wouldn’t even need to have any Align self option selected.

Or, if you prefer to make more/specific changes between web and mobile, you can use Formulas in the width properties. You’d just need to use System variable runtime to determine what type of device the user has.

Hey, Tomi, thank you for your response and my apologies for missing this by over a month!!!

I did a little more experimenting and determined a slightly convoluted way of getting this to work playing off your first suggestion. I’d actually considered using an invisible support container like a “section”, as I’d mentioned Webflow having. This technique DOES NOT work as of this writing in a manner as simple as nesting the white base containers into a section container and aligning to the center. Nothing happens in that case.

But where there’s a will, there’s a way. I’ll leave my solution below in case anyone else stumbles upon this issue.

  1. I first had to nest the white base container into the invisible section container.

  2. Set the section container to the Horizontal layout in the Style tab.

  3. Set the section container to “Justify children horizontally to the middle”.

  4. Selecting the visible base container, go into the Style tab and down to the Dimension and Position section. A new field called Growing and Shrinking will have appeared at the bottom of this section. (Note: This option does NOT appear when the section container is set to the Vertical layout.)

  5. Select the third Growing and Shrinking option labeled “Grow to fill free space in the container…”. Make sure you set a max-width to your base containers.

  6. Save and preview. The base container should now be centered and maintain the max-width set while also shrinking in a mobile-friendly way if, say, you shrink your browser’s window down to the size of a tablet or phone screen.

• Note that you will need separate section containers for each base container if you have multiple of them on a single page as the sections are now set to the Horizontal layout and will place objects in them side-by-side rather than stacking them vertically – unless that’s what you desire to do.

Thanks for the suggestions, Tomi!