1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
/* -----------------------------------*/
/* ----- 960px wide fancy grid! ----- */
/* -----------------------------------*/
/* by tim o'brien, t413.com
* based on getskeleton.com
*/
/* ----- base grid----- */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
.container .small.column { width: 300px; }
.container .half.column { width: 460px; }
.container .big.column { width: 620px; }
.container .full.column { width: 940px; }
/* ----- Tablet (Portrait) -- 768px ----- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .small.column { width: 236px; }
.container .half.column { width: 364px; }
.container .big.column { width: 488px; }
.container .full.column { width: 748px; }
}
/* ----- Mobile (Portrait) ----- */
@media only screen and (max-width: 767px) {
.container { width: 96%; }
.container .column { margin: 1%; }
.container .small.column { width: 48%; }
.container .half.column { width: 48%; }
.container .big.column { width: 98%; }
.container .full.column { width: 98%; }
}
/* ----- Mobile (Landscape) -- 480px ----- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 92%; }
.container .column { margin: 2%; }
.container .small.column { width: 46%; }
.container .half.column { width: 46%; }
.container .big.column { width: 96%; }
.container .full.column { width: 96%; }
}
/* ----- Clearing ----- */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
|
