From the course: HTML and CSS: Creating Forms
Join today to access over 25,500 courses taught by industry experts.
Wider screen layout for forms
From the course: HTML and CSS: Creating Forms
Wider screen layout for forms
- [Instructor] 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 450 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 I'm going to add a media query for wider screens that changes the layout so that the labels are to the left of the input fields instead of above them. That will save space on the screen. 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 start at the narrowest width and then make the browser window wider until I pick a spot that feels good and I feel like there's a sweet spot that there's enough space that I can move those boxes to be next to the labels, and there'll still be plenty of room for people to type in there. So…
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.