Responsive design row in column

ingriddanielsson · 2025-01-05T21:19:47.903Z

I know the basics about responsive design and all the pages, what I know, is responsive except one page and the first and last name input fields. I have spent hours trying to figure out what I do wrong, but I just can’t see it. Can you help me see what I am doing wrong?

image762×576 21.5 KB

image1290×778 76.8 KB

image1248×732 77.5 KB

iwakinomotoye · 2025-01-06T01:58:57.782Z

Check the minimum width and maximum width of the input, input label and their parent container. If you cant find it, you can share an image of these 3 items for the firstname section.

ingriddanielsson · 2025-01-06T12:02:11.583Z

No min and max width what I can see. Can you see where it is wrong?

image1694×870 116 KB

image1660×942 128 KB

image1704×1268 320 KB

iwakinomotoye · 2025-01-06T13:22:02.129Z

Hi @ingriddanielsson thanks for the images, I cannot see any real issue. Only curious about what property was changed in the conditon of “Group Input First Name”

senecadatabase · 2025-01-06T13:57:47.675Z

You have quite a grouping there.

You have Group B inside of Group G inside of Group Name inside of Group Tell Us About Yourself inside of Group Welcome inside of Group H inside of Group User.

I think I would try and better organize your data.

Anyway, your Group B responsiveness is going to be dependent on its parent groups and on up the line.

I see your Group B (which is a row) has 2 groups in it with no minimum. That means anything in Group B will shrink to Group B’s minimum…which will shrink to its parent elements minimum etc., and the groups in it won’t go into a column format.

You need to set a minimum on a group when you have it in a row if it has other groups in that row if you want it to go into a column format.

The maximum you set will either depend on the parent container or your set max.

I would suggest you look all the parent containers Group B is in and start from there and then look at each child element in descending order and fix the responsiveness of each one.

A lot of times (usually) when you have a responsive issue, there’s a good chance it will be because of a parent element.

ingriddanielsson · 2025-01-06T14:37:08.145Z

Thank you for checking. I am not sure what you mean with your question. Input First Name changes the first name of the user. The group groups the input and the header/label of the input together.

ingriddanielsson · 2025-01-06T14:39:14.195Z

So many groups yes! I can try to organize and look at parent containers and child element again . Thank you for your comment.

iwakinomotoye · 2025-01-06T15:18:36.428Z

I was asking what you have in the conditional tab of “Group Input First name”

ingriddanielsson · 2025-01-06T15:45:10.092Z

ah, that made more sense. Here is the contiditonal tab for the group.

image1528×598 76.2 KB

iwakinomotoye · 2025-01-06T19:07:58.358Z

Okay, minimum width here to make the group stay alone in the row. I cant see if it is 150px or 150%. Anyway, can you change it to 100% minimum with and see if this would solve the issue. @ingriddanielsson

ingriddanielsson · 2025-01-06T20:08:19.112Z

wow, it worked. Finally. Thank you. Well done! I would never have found out about it without your help! iwakinomotoye

image1058×646 21.9 KB

image1098×778 58.5 KB

iwakinomotoye · 2025-01-06T20:47:55.843Z

That’s fantastic @ingriddanielsson

system · 2025-03-16T21:20:44.675Z

This topic was automatically closed after 70 days. New replies are no longer allowed.