Join James Williamson for an in-depth discussion in this video Defining media queries, part of Applied Responsive Design.
So in the previous exercise we discussed setting breakpoints and used a couple of media queries…to control multiple layouts.…In this exercise we're going to a little deeper into media queries and we're going to set up…our initial structure for the desolve.org layout.…To do that, I'm going to be working in the main.css file, which you can find in the 02_04…exercise folder, and then inside of that, the _css directory.…So this is pretty much where we left our CSS file the last when we're working on it when…we set some global styles. If I scroll down for example,…I can see the last global style deals with page footer, and that's just another workflow that…I forget to mention it to people, and it's fairly common--most of you probably work same way.…
I typically will write my styles in the order that they're found within the source order,…so the header styles will come up first, followed by whatever is in the HTML code, and then page…footer is at the bottom. And it's just so much easier for me to find styles and to avoid…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.