changinglayout.notebook september 06, 2013cisweb.bristolcc.edu/~pgrocer/responsivewebdesign/... ·...
TRANSCRIPT
![Page 1: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/1.jpg)
changinglayout.notebook
1
September 06, 2013
![Page 2: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/2.jpg)
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.
![Page 3: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/3.jpg)
changinglayout.notebook
3
September 06, 2013
I centered the header andused @media to repositionthe bottom two boxeswhen the size decreased.
![Page 4: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/4.jpg)
changinglayout.notebook
4
September 06, 2013
![Page 5: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/5.jpg)
changinglayout.notebook
5
September 06, 2013
Another look.
![Page 6: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/6.jpg)
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.
![Page 7: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/7.jpg)
changinglayout.notebook
7
September 06, 2013
![Page 8: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/8.jpg)
changinglayout.notebook
8
September 06, 2013
![Page 9: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/9.jpg)
changinglayout.notebook
9
September 06, 2013
![Page 10: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/10.jpg)
changinglayout.notebook
10
September 06, 2013
![Page 11: changinglayout.notebook September 06, 2013cisweb.bristolcc.edu/~pgrocer/ResponsiveWebDesign/... · changinglayout.notebook 3 September 06, 2013 I centered the header and used @media](https://reader036.vdocuments.site/reader036/viewer/2022081616/5ffe1209b4fabb26e820a2f8/html5/thumbnails/11.jpg)
changinglayout.notebook
11
September 06, 2013
Note the headerand the pinkbox are at thetop.