From the course: Responsive Design with Dreamweaver CS6
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Balancing tablet layouts - Dreamweaver Tutorial
From the course: Responsive Design with Dreamweaver CS6
Balancing tablet layouts
In this lesson we are going to focus on the layout for tablets, or more specifically, any screen device ranging from 481 pixels to 768 pixels in width. For most designs this size will probably allow for at least two columns, so let's adjust our fluid grid layout accordingly. Okay, I have got the profile.htm file from the Chapter 2 02_05 folder opened in Design view and my Fluid Grid Layout Guides found under the Visual Aids menu button are enabled, and I am showing the tablet size. So, as you can see, as I scroll down, everything is pretty much in single columns here, you get the appearance of a double column with the images there, but it's still actually housed in one single column. Why don't we put the main content which is the first entry here, and the interview, the second entry, side by side? So to do that, I am going to put my cursor in main content which selects that, now I am going to resize the div down to four columns, and because we are in a div that is not aligned to the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.