changinglayout.notebook september 06, 2013cisweb.bristolcc.edu/~pgrocer/responsivewebdesign/... ·...
TRANSCRIPT
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.