1 |
d7f58da2
|
Florent Torregrosa
|
// ====================================================================
|
2 |
|
|
// Mobile first layout.
|
3 |
|
|
// This is the layout for smalltouch_portrait which stacks all the columns
|
4 |
|
|
// at 100% width for each. Media queries cause this to be available to
|
5 |
|
|
// only the layouts that have width less than 321px.
|
6 |
|
|
// ====================================================================
|
7 |
|
|
#main-wrapper {
|
8 |
|
|
width: 100%;
|
9 |
|
|
position: relative;
|
10 |
|
|
}
|
11 |
|
|
|
12 |
|
|
#main {
|
13 |
|
|
width: 100%;
|
14 |
|
|
}
|
15 |
|
|
// Limits the stacking of top-column blocks to small screen touch.
|
16 |
|
|
@media only screen and (max-width:320px) {
|
17 |
|
|
#top-columns .column-block-wrapper {
|
18 |
|
|
width: 100% !important;
|
19 |
|
|
margin-top: 1em;
|
20 |
|
|
}
|
21 |
|
|
|
22 |
|
|
#top-columns .column-block-wrapper .column-block {
|
23 |
|
|
height: auto !important;
|
24 |
|
|
margin:0 !important;
|
25 |
|
|
}
|
26 |
|
|
}
|
27 |
|
|
#content,
|
28 |
|
|
#sidebar-first,
|
29 |
|
|
#sidebar-second, {
|
30 |
|
|
margin: 0;
|
31 |
|
|
width: 100%;
|
32 |
|
|
img {
|
33 |
|
|
max-width: 100%; // Make sure all images fit within viewport
|
34 |
|
|
height: auto; // Correct width from max-width rule above.
|
35 |
|
|
}
|
36 |
|
|
}
|
37 |
|
|
|
38 |
|
|
#sidebar-first .section,
|
39 |
|
|
#sidebar-second .section {
|
40 |
|
|
// margin:0 !important;
|
41 |
|
|
}
|