Survey Form Project mess, need help

Survey Form Project mess, need help
0.0 0

#1

Hello! So I thought I was doing so well, and the survey looks good until I go to make my @media queries.

Here’s my conundrum. There’s a lot of code, I’m sure I took the long way around somehow. But in an effort to get my name, email, and age labels to fall on the left side of their corresponding input fields, I made them into 2 different child elements called “labels” and “fields”. They are nested inside the parent element called “flex-test”. Now this is posing a problem when I want to set the @media query below 626px, I want the labels to be directly above their corresponding fields in proper order, like in the example, but they are two different elements that are stacking on top of one another.

Here is the link, please halp!


#2

That won’t be possible with the way you have the markup. I would suggest you do 2 things: 1) put your labels in the same containing element as their corresponding inputs, and 2) start with your mobile design as the default and use media queries to make the changes for your desktop design.