Join James Williamson for an in-depth discussion in this video Building the basic mobile layout, part of Applied Responsive Design.
We'll finish styling the basic page regions of the layouts by turning our attention to our mobile styles.…Now, pretty much here, we're going to follow the same thing that we did in the previous two exercises.…I'll paste some code in, and it's going to follow pretty much the same structure we did…before, in terms of the regions that we will be styling.…And again, I'm just going to focus on the differences between the mobile styles and the tablet and…the desktop styles. So we're going to start in our mobile styles. The first rule, as it has been in the past,…is going to be with the body selector. And if we compare that one to the one right underneath it…there for the tablet, you'll notice that the width is the same, 90% for both of those. We're using…auto margins for the center, but again we're defining that sort of range of motion, if you will, into the media query.…
So 320 pixels wide is going to be as low as it can possibly go,…and as wide it's going to be able to go is about 480 pixels, so that's going to be our mobile layout.…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.