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

Responsive inputs for mobile devices - Dreamweaver Tutorial

From the course: Building HTML5 Forms with Dreamweaver

Start my 1-month free trial

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…

Contents