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

Balancing tablet layouts - Dreamweaver Tutorial

From the course: Responsive Design with Dreamweaver CS6

Start my 1-month free trial

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…

Contents