From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Building responsive layouts: Lab - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Building responsive layouts: Lab
Now it's time to revisit our desolve.org layout and help convert it to a responsive design. In this lab, we're going to tackle properly writing media queries, controlling the initial page view in mobile devices, and styling elements based on the targeted device. So I have the finished file of our lab opened in the browser right now, and I just want to preview it for you guys and show you the different breakpoints within this responsive layout. Now this is the same layout you guys have seen for quite some time now. The only difference, of course, here is that we now have a responsive layout rather than just a fluid or a fixed one. So you'll notice right off the bat, it's a fluid layout within a certain range, but then when you hit a breakpoint, it switches to the next layout. We have some pretty large differences between the layouts. You can see here, for example, the Preview section is dramatically different between the tablet and the desktop version. You'll also notice that our menu…
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.
Contents
-
-
-
-
-
-
-
-
-
(Locked)
Responsive layout overview3m 49s
-
(Locked)
Using media queries7m 16s
-
(Locked)
Organizing styles8m 39s
-
(Locked)
Making content responsive8m 33s
-
(Locked)
Mobile design considerations7m 32s
-
(Locked)
Building responsive layouts: Lab4m 23s
-
(Locked)
Building responsive layouts: Solution9m 24s
-
(Locked)
-
-