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.
Refining form layout - CSS Flexbox Tutorial
From the course: Building Responsive Forms with Flexbox
Refining form layout
- 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…
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.