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

Building responsive layouts: Lab - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

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…

Contents