Responsive design row in column

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?

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.

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

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”

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.

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.

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

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

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

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

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

That’s fantastic @ingriddanielsson