Join James Williamson for an in-depth discussion in this video Refining form layout, part of Building Responsive Forms with Flexbox.
- View Offline
- Technically, our search form is responsive,…however the entire page layout…might be exactly what we want.…For example, you'll notice if I test the page…as we have it currently,…and I resize it,…when I start getting down to the smaller screen sizes,…this sort of page margin on either side is still there.…At smaller screens and smaller devices,…that's kind of a waste of space,…so I'd really kind of like to get rid of that.…Now to do that, we're not going to be using Flexbox,…we're going to be using media queries.…So Flexbox isn't something that's going to allow us…to do our entire responsive design.…
It's a single tool within the set.…So before we move on to our next form,…let's first take a moment to refine…our search forms layout.…Now to do that I'm going to be working…in the search.htm file,…found in the 01-07 directory.…And the first thing I'm going to do,…is at the very top of all of our styles,…I'm just going to apply some contraints…to our search form.…This is going to help us not only at smaller sizes,…but at larger sizes as well.…
In 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.