Join James Williamson for an in-depth discussion in this video Making form sections responsive, part of Building Responsive Forms with Flexbox.
- View Offline
- All of our individual form elements…are now responsive but we still need to make…the form sections, themselves, responsive.…We're going to tackle that by using the forms…that HTM found in the 02-06 directory.…Now remember our individual sections,…we have three of them, they're using the section element.…The class is form-group for the first two…and then the last section down here…at the bottom is form-submit.…And those are all direct children…of the form element itself, and that's important…to understand that structure when…we're dealing with Flexbox because…remember, to use Flexbox we first set…the parent's display property to flex…and then the direct children themselves…become flexed items and that's…what we're going to need to do.…
So, for this I'm going to go all the way…back up to the top of my flex code,…which starts right now about line 87 or so.…And the first thing I'm going to do is set…my form itself to be a flex container.…So, I'm going to use the .register-form…selector and I'm going to set the display property…
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.