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).
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.
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.
@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
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.
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
