From the course: Building HTML5 Forms with Dreamweaver
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Responsive inputs for mobile devices - Dreamweaver Tutorial
From the course: Building HTML5 Forms with Dreamweaver
Responsive inputs for mobile devices
- [Instructor] We've looked at the value of labels and using them with laptops and desktops. We've also looked at the value of hiding labels so they don't take up so much real estate in a mobile device. Let's try the best of both worlds. We'll display labels in laptops and desktops, but hide them in mobile devices. I can do this with a media query. So I'm going to choose 800 pixels as the cutoff point, so that tablets do not see labels, and the smallest laptop and desktop does. And I'll just enter the code for the media query. Now with the media query that detects viewing environments where the screen width is 800 pixels or less, the labels will be hidden. Let's try that in our browser. At full screen the labels are visible and useful for laptop users. At a smaller view port, once we get down below 800 pixels we can see that the labels disappear. Want to see that again? There they are, they disappear. So mobile users are getting a more streamlined experience, laptop, desktop users…
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.