root / drupal7 / sites / all / themes / adaptivetheme / at_subtheme / css / responsive.custom.css @ 74f6bef0
1 | 85ad3d82 | Assos Assos | /*
|
---|---|---|---|
2 | * responsive.custom.css is for custom media queries that are not set via the
|
||
3 | * theme settings, such as cascading media queries.
|
||
4 | *
|
||
5 | * By default all the other responsive stylesheets used in Adaptivetheme use a
|
||
6 | * "stacking method", however cascading media queries use a waterfall method so
|
||
7 | * you can leverage the cascade and inheritance for all browsers that support
|
||
8 | 74f6bef0 | Assos Assos | * media queries.
|
9 | 85ad3d82 | Assos Assos | *
|
10 | * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
|
||
11 | *
|
||
12 | 74f6bef0 | Assos Assos | * NOTE: this file loads by default, to disable go to your theme settings and
|
13 | 85ad3d82 | Assos Assos | * look under the "CSS" settings tab.
|
14 | */
|
||
15 | 74f6bef0 | Assos Assos | |
16 | 85ad3d82 | Assos Assos | /*
|
17 | * Really small screens and up
|
||
18 | */
|
||
19 | /* @media only screen and (min-width: 220px) {} */
|
||
20 | 74f6bef0 | Assos Assos | |
21 | 85ad3d82 | Assos Assos | /*
|
22 | 74f6bef0 | Assos Assos | * Smalltouch sizes and up
|
23 | 85ad3d82 | Assos Assos | */
|
24 | /* @media only screen and (min-width: 320px) {} */
|
||
25 | 74f6bef0 | Assos Assos | |
26 | 85ad3d82 | Assos Assos | /*
|
27 | 74f6bef0 | Assos Assos | * Smalltouch sizes and down
|
28 | 85ad3d82 | Assos Assos | */
|
29 | @media only screen and (max-width: 480px) { |
||
30 | /*
|
||
31 | 74f6bef0 | Assos Assos | * Float Region Blocks - custom media query CSS example:
|
32 | *
|
||
33 | * Float regions blocks is an Extension you can enable in the appearance
|
||
34 | * settings for your theme. This feature allows you to automatically float
|
||
35 | * blocks in regions, you can switch it on and off depending on your
|
||
36 | * requirements. For design purposes you many want to remove the floats for
|
||
37 | * devices where the entire theme is just one column - for example small
|
||
38 | * mobile phones. The following CSS is inside the custom media query:
|
||
39 | *
|
||
40 | * @media only screen and (max-width: 480px){}
|
||
41 | *
|
||
42 | * This will target devices with a maximum width of 480px - most small phones.
|
||
43 | * In these smaller screen sizes we can remove the float and widths so all
|
||
44 | * blocks stack instead of displaying horizonally. The selector used is an
|
||
45 | 85ad3d82 | Assos Assos | * "attribute selector" which will match on any float block class. Use your
|
46 | * inspector or Firebug to get the classes from the page output if you need
|
||
47 | * more granular control over block alignment and stacking.
|
||
48 | */
|
||
49 | .region[class*="float-blocks"] .block { |
||
50 | float: none; |
||
51 | width: 100%; |
||
52 | } |
||
53 | } |
||
54 | 74f6bef0 | Assos Assos | |
55 | 85ad3d82 | Assos Assos | /*
|
56 | * Tablet sizes and up
|
||
57 | */
|
||
58 | /* @media only screen and (min-width: 768px) {} */
|
||
59 | 74f6bef0 | Assos Assos | |
60 | 85ad3d82 | Assos Assos | /*
|
61 | * Desktops/laptops and up
|
||
62 | */
|
||
63 | /* @media only screen and (min-width: 1025px) {} */
|