- We'll start making our search form responsive…by making the form itself a flex container.…This will in turn make the form elements…themselves flex items,…and it's gonna instantly add a degree…of responsiveness to our form.…So I'll be working with a search.htm File…found in the 01-05 directory.…You can see here I have the file opened in Chrome.…And I'm going to switch over to my code editor…where I'm going to be working with the same file.…And just to remind ourselves,…I've scrolled down to the bottom where the form is…and you can see that we have just those two elements,…the submit button and the search input,…and they are inside the form element.…
That means that these two elements are the direct…children of the form tag.…And that's why this is going to work.…When you take an element and make it a flex container,…their direct children are flex items.…Not anything nested any further than that…just the direct children.…So because of that,…because the input and the button are direct children…of the form element, this is going to work or us.…
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: Making the form responsive