Advertisement
Guest User

media queries

a guest
Sep 29th, 2013
69
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.34 KB | None | 0 0
  1. /* =Responsive Structure
  2. -------------------------------------------------------------- */
  3.  
  4. @media screen and (max-width: 1024px) {
  5.     .flex-direction-nav {
  6.         bottom: -36px;
  7.         left: auto;
  8.         margin: 0;
  9.         right: 21px;
  10.         top: auto;
  11.         width: auto;
  12.     }
  13.     .flex-direction-nav li {
  14.         float: left;
  15.         margin: 0 1px 0 0;
  16.     }
  17. }
  18.  
  19. @media screen and (max-width: 768px) {
  20.     .site-title {
  21.         float: none;
  22.         width: 100%;
  23.     }
  24.     .site-description {
  25.         float: none;
  26.         margin: 0.7857142857em 0 0 0;
  27.         width: 100%;
  28.     }
  29.     #masthead hgroup {
  30.         margin: 0 0 2.2857142856em 11.17886178%;
  31.     }
  32.     .site-content {
  33.         float: none;
  34.         margin: 0;
  35.     }
  36.     #content {
  37.         margin: 0;
  38.     }
  39.     #secondary {
  40.         float: none;
  41.         width: 100%;
  42.     }
  43.     .hentry {
  44.         margin: 0 0 3.1428571428em 11.17886178%;
  45.     }
  46.     .entry-header .avatar {
  47.         margin: 9px 0 0 -12.58581235%;
  48.     }
  49.     #content .site-navigation {
  50.         margin: 0 0 1.5714285714em 11.17886178%;
  51.     }
  52.     .syndicate,
  53.     .widget {
  54.         padding: 1.6666666666em 0 0 11.17886178%;
  55.     }
  56.     .page-header {
  57.         margin: 0 0 3.1428571428em 11.17886178%;
  58.     }
  59.     .featured-content {
  60.         float: none;
  61.         width: 100%;
  62.     }
  63.     .featured-content-info {
  64.         float: none;
  65.         margin: 0;
  66.         width: 100%;
  67.     }
  68.     .featured-summary p {
  69.         padding: 0 0 2em 0;
  70.     }
  71.     .flex-direction-nav {
  72.         bottom: -35px;
  73.         left: 0;
  74.         margin: 0;
  75.         right: auto;
  76.         top: auto;
  77.         width: 100%;
  78.     }
  79.     .flex-direction-nav li {
  80.         float: none;
  81.     }
  82.     .flex-direction-nav li a {
  83.         left: 0;
  84.         position: absolute;
  85.         top: 0;
  86.     }
  87.     .flex-direction-nav li .flex-prev {
  88.         margin: 0 0 0 -6px;
  89.     }
  90.     .flex-direction-nav li .flex-next{
  91.         left: auto;
  92.         margin: 0 -6px 0 0;
  93.         right: 0;
  94.     }
  95.     .flex-control-nav {
  96.         bottom: 0;
  97.         left: 0;
  98.         text-align: center;
  99.         width: 100%;
  100.     }
  101.     #comments {
  102.         margin: 0 0 1.5714285714em 11.17886178%;
  103.     }
  104.     .comment .avatar {
  105.         margin: 3px 0 0 -12.58581235%;
  106.     }
  107.     #content .site-navigation.comment-navigation {
  108.         margin: 0 0 1.5714285714em 0;
  109.     }
  110.     .error404 article .widget {
  111.         padding: 1.6666666666em 0 0 0;
  112.     }
  113.     .syndicate li {
  114.         margin: 0 0 0.933333333em 20px;
  115.     }
  116.     .syndicate li:first-child {
  117.         margin: 0;
  118.     }
  119. }
  120.  
  121. @media screen and (max-width: 600px) {
  122.     #page {
  123.         padding: 3.1428571428em 0.5714285714em 0;
  124.     }
  125.     #masthead {
  126.         margin: 0 0 3.1428571428em 0;
  127.     }
  128.     #masthead hgroup {
  129.         margin: 0 0 2em 0;
  130.     }
  131.     .site-title {
  132.         font-size: 22px;
  133.         text-align: center;
  134.     }
  135.     .site-description {
  136.         font-size: 12px;
  137.         margin: 0;
  138.         text-align: center;
  139.     }
  140.     .main-small-navigation {
  141.         border-bottom: 1px dotted #b3b3b3;
  142.         border-top: 1px dotted #b3b3b3;
  143.     }
  144.     .menu-toggle {
  145.         font-size: 17px;
  146.         line-height: 2.0em;
  147.         margin: 0;
  148.         text-align: center;
  149.         text-transform: uppercase;
  150.     }
  151.     .menu-small-menu-container {
  152.         margin: 0 auto;
  153.         width: 50%;
  154.     }
  155.     .featured-posts-wrapper {
  156.         margin: -0.8571428571em 0 4.7142857142em 0;
  157.     }
  158.     .entry-header .avatar {
  159.         display: none;
  160.     }
  161.     .byline {
  162.         display: inline;
  163.     }
  164.     .hentry,
  165.     .full-width .hentry,
  166.     .image-attachment .hentry,
  167.     .no-sidebar .hentry,
  168.     .error404 .not-found {
  169.         margin: 0 0 3.1428571428em 0;
  170.     }
  171.     .entry-content, .entry-summary {
  172.         margin: 1.5714285714em 0 0 0;
  173.     }
  174.     h1 {
  175.         font-size: 22px;
  176.     }
  177.     h2 {
  178.         font-size: 19px;
  179.     }
  180.     h3 {
  181.         font-size: 17px;
  182.     }
  183.     h4 {
  184.         font-size: 15px;
  185.     }
  186.     h5 {
  187.         font-size: 14px;
  188.     }
  189.     .no-sidebar .page-header {
  190.         margin: 0 0 3.1428571428em 0;
  191.     }
  192.     #comments,
  193.     .full-width #comments,
  194.     .image-attachment #comments,
  195.     .no-sidebar #comments {
  196.         margin: 0 0 1.5714285714em 0;
  197.     }
  198.     .comment .avatar {
  199.         display: none;
  200.     }
  201.     #content .site-navigation,
  202.     .no-sidebar #content .site-navigation {
  203.         margin: 0 0 1.5714285714em 0;
  204.     }
  205.     .page-header {
  206.         margin: 0 0 3.1428571428em 0;
  207.     }
  208.     .syndicate, .widget {
  209.         padding: 1.6666666666em 0 0 0;
  210.     }
  211.     .site-footer {
  212.         padding: 1.5714285714em 0 1.5714285714em 0;
  213.     }
  214. }
  215. @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  216.     #page {
  217.         padding: 1.5714285714em 0.5714285714em 0;
  218.     }
  219.     #masthead {
  220.         margin: 0 0 1.5714285714em 0;
  221.     }
  222.     #masthead hgroup {
  223.         margin: 0 0 1.1428571428em 0;
  224.     }
  225.     .featured-posts-wrapper {
  226.         margin: -0.8571428571em 0 2.3571428571em 0;
  227.     }
  228.     .hentry {
  229.         margin: 0 0 1.5714285714em 0;
  230.     }
  231.     .entry-content, .entry-summary {
  232.         margin: 0.7857142857em 0 0 0;
  233.     }
  234.     .commentmetadata {
  235.         margin: 0 0 0.9166666666em 0;
  236.     }
  237.     .entry-content embed,
  238.     .entry-content iframe,
  239.     .entry-content object {
  240.         height: auto;
  241.     }
  242. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement