- In this chapter we're going to work to craft a…responsive layout using a larger form.…While we use many of the same concepts that we…covered in the last chapter, we're going to need to…explore how the nest flex containers and how to deal with…the responsive needs of multiple element types.…So before we get into writing the styles, we need…to understand the structure of our form…and kind of what our goals are.…So for that, I've opened up the forms study htm file…that is found in the 02/01 directory and I'm…going to scroll down through the code…until we get down to our form.…
It starts on about line 19 or so.…So we have a form with class of register form…and inside that you'll notice that we have some headings…that mark different sections of the form.…The first is personal info and if I scroll down a little…bit further, I can see that we have some registration…info, we have another h3 right here that says sessions,…so that marks another large section and inside that…we have a heading h for skills and if I scroll…
Released
1/8/2016In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.
Share this video
Embed this video
Video: Longer form structure