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