Building responsive layouts: Lab


show more Building responsive layouts: Lab provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

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 ...

Building responsive layouts: Lab
Video duration: 4m 23s 8h 57m Beginner

Viewers:

Building responsive layouts: Lab provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...