From the course: Building Responsive Forms with Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Making form sections responsive

Making form sections responsive - CSS Flexbox Tutorial

From the course: Building Responsive Forms with Flexbox

Start my 1-month free trial

Making form sections responsive

“

- 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…

Contents