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.

Adding media queries

Adding media queries - CSS Flexbox Tutorial

From the course: Building Responsive Forms with Flexbox

Start my 1-month free trial

Adding media queries

“

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

Contents