From the course: Building Responsive Forms with Flexbox
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Making the form responsive - CSS Flexbox Tutorial
From the course: Building Responsive Forms with Flexbox
Making the form responsive
- 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.