From the course: HTML & CSS: Creating Forms
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Wide-screen layout for forms - HTML Tutorial
From the course: HTML & CSS: Creating Forms
Wide-screen layout for forms
- [Narrator] We already created a layout for this form that works well for the narrowest screen widths. Now we're going to use media queries to change the layout for wider screens. Here's what our layout looks like at 400 pixels wide. If I make the browser window wider, I can see that the input fields get very long. They don't need to be that long so at some point I can add a media query and change the layout so that the labels are to the left of the input fields instead of above them. To determine where I should make that media query go, I figure out where there's a good point at which it looks like there's enough space to do that. So I'm going to make the browser window wider until I feel like maybe at about this point there's enough space to add the input fields next to the labels instead of below them. To figure out what width I need to put my media query at, the best way to do that is to have a tool like MQtest.io open in a separate tab of the same window. This will tell me…
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.