Customizing a layout for phones can be the most difficult of tasks.…It's often the hardest because you have such a limited screen size to work with,…but once you make your piece with that, it can be the easiest to design for,…exactly, because your options are so limited.…In this lesson we're going to take the few steps necessary to complete a basic…phone Fluid Grid Layout.…I have a profile.htm open from the Chapter 2/02_04 folder in Design view, and…I have enabled the fluid grid layout outlines from the Visual Aids menu button.…
So let's switch to the Mobile screen by clicking on its icon and see where we are at.…So I'm going to close down Properties here, we get a little bit more screen real…estate, and as I scroll down, I can see that my top header is okay, but that…first column is indented, indicating that it's set up as a row that can be…shared, as opposed to a full row, and these other ones look okay.…Yes, it looks good, and then there's the footer, looks like it's got some issues.…
So let me correct this first, and you'll find this often when you're working in…
Released
8/21/2012- Exploring the default Fluid Grid Layout
- Adding building block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Adjusting column widths and margins
- Building media queries from scratch
- Handling orientation changes
- Applying JavaScript techniques
- Setting up server-side solutions
Share this video
Embed this video
Video: Targeting a phone design