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.
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 . Thank you for your comment.
I was asking what you have in the conditional tab of “Group Input First name”
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