Join James Williamson for an in-depth discussion in this video Adding media queries, part of Building Responsive Forms with Flexbox.
- View Offline
- While we've been able to handle most…of our responsive needs through Flexbox,…there are still a couple of things that we need to handle…through the use of media queries.…For example, you'll notice as I resize the page down,…when we get down to those smaller sizes,…we still have that page margin for the body…on either side, and our form doesn't quite fit…within that space anymore,…because of the size of the body element…relative to those margins on either side.…So, that doesn't look as great as it should,…and to deal with that, we're going to use a media query.…
So I've opened up the forms.htm file,…found in the 02-08 folder.…And I'm going to go all the way down to the bottom…of my styles, and just as we did in the first chapter,…I'm going to add a media query.…So once again, the syntax for that is…@media, and then a space,…and then in parentheses, I'm going to go ahead and give it a…max-width of 400px.…Again, that's based on the size of the form,…the size of the elements inside the form,…and the devices or viewports that I'm targeting.…
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.