Responsive Forms Solution

[00:00:00]
>> Jen Kramer: Hopefully you made some good progress putting together this form and tying it into the layout that we've been working on so far, okay? Yeah, yeah. People in the room say yeah sure. So let's go ahead and, you got it? Okay, so let's go ahead and go through what I had for an answer.

[00:00:19]
Because I left this very open-ended of course your answers may be different. If you get the result in the end that is what is important. And of course I'd like to see you tie it in to all the work we did with layout earlier in the day. So let's go on ahead and go through these answers.

[00:00:34]
I'm gonna start here with the HTML and this is form.html, it's in your end folder. And I'm gonna start here around line number 55. So we've got form, we've got our field set, and then I've put in a div with a class of flex. And I wrapped that all the way around the three blanks that I have asked for here, these three fields with their labels that go with them.

[00:01:02]
And I've called them either item1, or I called them item2, assign those classes. Those may not be the best names in the world, but it was pretty clear. There's one item and then there's a second one. And then of course the div of the class of flex is gonna wind up being my flex parent or my flex container.

[00:01:20]
And all of these other things are flex items, the children. Okay, so that's how I'm gonna wind up getting that to work. And then down here, in my HTML later on I've got, again around the series of radio buttons, I've got my dev with the class flex. My question, what resource is it?

[00:01:40]
Labeled as item1 and then around item2 are all of my radio buttons. Okay, so there's that. Then once again div of the class of flex, item1 on the label, item2 on the select drop down. And then finally, the div of the class of flex here around 98 going around the other details or the comments.

[00:02:03]
And then that's just labeled as item1 for the label, item2 for the text area. So that's pretty much the pattern that I followed there. Then when you go ahead and you take a look at your CSS, I'm actually gonna look at layout.css once again. And here what I've done is I've added an addition to name, I've added my class of flex.

[00:02:25]
There it is, okay? It's basically gonna be the same thing. One thing that is gonna happen though is that things are not gonna be quite square. You might have noticed. At least I ran into this problem putting these elements next to each other. Item1 and item2. So in order to get things to work, I have also added here the aligned items of baseline.

[00:02:47]
And that will get these to line up much more nicely than they were before. And then basically, item1 and item2 become part of the code that we wrote before down here, okay? So we're all set to pass in our various widths and if we wanted to change the gap and all the rest of that kinda stuff.

[00:03:06]
So that is pretty straightforward. And it gets down here in my media queries. All I've done here in the very first media query, down here at the bottom, I have item1 and item2. I gave them the widths of 3 and 8. And I think that's probably it. I think it pretty stayed the same all the other media queries.

[00:03:33]
I didn't change it after that, because they were already next to each other, it kinda worked with the layout the way it was. So that is what I came up with for my answer. Again, yours might vary a little bit. But again we can just leverage this code that we already wrote and now we've applied it to a form as well.

[00:03:52]
Isn't that nice? So we applied it basically to laying out all kinds of different pages with different forms of layouts. We've applied it to layouts within layouts, that developer section, right? And now we've applied it to a form as well. So pretty sweet.