Responsive Engine Resizing - What am I doing wrong?

[fernando7]

I am trying to figure out why my group is not resizing as it should.

The responsiveness I’m trying to mimic can be seen on reddit. Here’s what happens when you have it full screen:

When you shrink the screen to small to mobile size, the shape repeating group box shrinks to fit the screen size (and continues to shrink in tandem to fit the size of the screen).

For the life of me, I can’t figure out why I can’t replicate this on my experience for this blue group I have. It doesn’t shrink as I’ve expected.

Here are the settings - for the blue group

For the text boxes

large:

small:

Try it button

When I try to resize, the blue group and the text inside is not resizing as per what I’m looking for on the reddit example. In addition, the Try IT button should also move from the right of the screen, to the bottom of the text so it can be seen.

Is it me, or is there something with bubble that can’t do this? Thanks

[zach8]

Ok, you’re clearly dedicated because you took the time to make your question pretty clear. It’s not bubble, it is you, but you’re pretty close. I don’t have the exact solution because it’s hard for me to figure out exactly what you’re asking here.

i’m not sure what you mean when you say “the shape repeating group box shrinks to fit the screen size”. There are a few things moving and shrinking in that image.

But at a basic level, it sounds like you just need to take a different approach to the containers. It looks like the Reddit UI is using vertical containers inside horizontal containers, and perhaps fixed containers as well.

Just break your UI down into components, and figure out how they all work relationally to give the desired outcome. Good responsive design wont come out of a single container type. Feel free to clarify more and I’ll do my best to answer.

in order to get the containter to behave how you want, you need multiple containers.

[fernando7]

Hey @zach8 I appreciate the response. My question was hanging out for awhile and didn’t know whether people knew what I was referring to.

I have the blue horizontal container. Within it, I have two column containers (the text, and the button).

Sounds like I need to try using column containers rather than row containers.

Thanks will try your tip and circle back.

[fernando7]

@zach8 So I converted the blue box to a vertical container, which made sense.

As I’m resizing the screen, the smaller text (highlighted), doesn’t seem to be wrapping around to the next line. The behavior I want is that this text box should be responsive, and wrap to the next row so it’s visible.
Here’s the details

Here’s what happens when I resize

Can you help?
Thanks

[zach8]

The “blue box” is the navy blue background, right?

Are there other elements on the page that resize how you expect them to?

But it looks like you need to adjust your max height and/or max width to force that container to stay within the parameters you need. Right now you’re telling it to fit the content to the container, but it doesn’t look like you’re supplying any parameters that tell it how big to make the container. So, even though you’re changing the parameters of your screen, the column isn’t responding to what you’re doing because the changes fall within the limits you have set for your column.

You may also have an unintentional group or other elements on the page there somewhere that is interfering. Check the element browser tab in the visual workspace and make sure there isn’t anything unexpected in there.

Also check the text box’s parent/child viewer to ensure it’s in the group you think it’s in, and also ensure it’s not in any groups you aren’t aware of.

[fernando7]

@zach8 you’re a life saver.

I tried everything, and it was indeed a parent grouping that I forgot about that was interfering with the sizing. Logically (for me), it doesn’t make sense why it would interfere, but glad now that it’s over

Thank you again so much. Really appreciate it.

[zach8]

Hahha hell yeah homie! Those unintentional groups willl GET YOU!

Keep goin!!!