changinglayout.notebook september 06, 2013cisweb.bristolcc.edu/~pgrocer/responsivewebdesign/... ·...

changinglayout.notebook

1

September 06, 2013

changinglayout.notebook

2

September 06, 2013

Here I established the color for each of the four sections that I am going to manipulate and put a margin at the bottom of each.

changinglayout.notebook

3

September 06, 2013

I centered the header andused @media to repositionthe bottom two boxeswhen the size decreased.

changinglayout.notebook

4

September 06, 2013

changinglayout.notebook

5

September 06, 2013

Another look.

changinglayout.notebook

6

September 06, 2013

I took pictures as I went along but on the next few slides I will show you the various outputs.

Comment on how it was done.  In addition to the four boxes, I had two other groupings. One grouped boxes 2, 3 and 4 so I could move them as a group and one grouped boxes 3 and 4 so I could move them as a group.This made the coding easier.  I had an @media that specified the widths for the different looks.

To do this, you need to look at the layouts and figure out where the break points could be ­ yours may not be the same as mine, that is fine ­ I just want the different layouts.

changinglayout.notebook

7

September 06, 2013

changinglayout.notebook

8

September 06, 2013

changinglayout.notebook

9

September 06, 2013

changinglayout.notebook

10

September 06, 2013

changinglayout.notebook

11

September 06, 2013

Note the headerand the pinkbox are at thetop.