SHARE
TWEET

Untitled

a guest Aug 13th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="description" content="media-queries-example">
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>JS Bin</title>
  8. <style id="jsbin-css">
  9. /* Demonstrational Styles */
  10.  
  11. .container,
  12. aside,
  13. section {
  14.     border-radius: 10px;
  15. }
  16.  
  17. aside,
  18. section {
  19.     border: 1px solid white;
  20. }
  21.  
  22. span {
  23.     font-family: monospace;
  24.     font-size: 16px;
  25.     color: white;
  26.     border: 1px solid white;
  27.     border-top-left-radius: 10px;
  28.     padding: 0 3px 2px;
  29. }
  30.  
  31. .container {
  32.     background: #e0e0e0;
  33. }
  34.  
  35. aside {
  36.     background: #5197d5;
  37. }
  38.  
  39. section {
  40.     background: #fdd72a;
  41. }
  42.  
  43. /* Layout Styles */
  44.  
  45. aside,
  46. section {
  47.     margin-right: 1.096%;
  48. }
  49.  
  50. .container {
  51.     width: 95vw;
  52.     height: 50.13vh;
  53.     padding: 1.096%;
  54. }
  55.  
  56. aside {
  57.     width: 33.3%;
  58.     height: 100%;
  59.     float: left;
  60. }
  61.  
  62. section {
  63.     width: 33.3%;
  64.     height: 100%;
  65.     float: left;
  66. }
  67.  
  68. @media (max-width: 420px) {
  69.  
  70.     /* Demonstrational Styles */
  71.  
  72.     aside,
  73.     section {
  74.         height: 48%;
  75.         margin-bottom: 1.096%;
  76.     }
  77.  
  78.     /* Layout Styles */
  79.  
  80.     aside,
  81.     section {
  82.         float: none;
  83.         width: auto;
  84.     }
  85.  
  86. }
  87. </style>
  88. </head>
  89. <body>
  90.     <div class="container">
  91.         <aside><span><aside></span></aside>
  92.         <section><span><section></span></section>
  93.     </div>
  94.  
  95.  
  96. <script id="jsbin-source-css" type="text/css">/* Demonstrational Styles */
  97.  
  98. .container,
  99. aside,
  100. section {
  101.     border-radius: 10px;
  102. }
  103.  
  104. aside,
  105. section {
  106.     border: 1px solid white;
  107. }
  108.  
  109. span {
  110.     font-family: monospace;
  111.     font-size: 16px;
  112.     color: white;
  113.     border: 1px solid white;
  114.     border-top-left-radius: 10px;
  115.     padding: 0 3px 2px;
  116. }
  117.  
  118. .container {
  119.     background: #e0e0e0;
  120. }
  121.  
  122. aside {
  123.     background: #5197d5;
  124. }
  125.  
  126. section {
  127.     background: #fdd72a;
  128. }
  129.  
  130. /* Layout Styles */
  131.  
  132. aside,
  133. section {
  134.     margin-right: 1.096%;
  135. }
  136.  
  137. .container {
  138.     width: 95vw;
  139.     height: 50.13vh;
  140.     padding: 1.096%;
  141. }
  142.  
  143. aside {
  144.     width: 33.3%;
  145.     height: 100%;
  146.     float: left;
  147. }
  148.  
  149. section {
  150.     width: 33.3%;
  151.     height: 100%;
  152.     float: left;
  153. }
  154.  
  155. @media (max-width: 420px) {
  156.  
  157.     /* Demonstrational Styles */
  158.  
  159.     aside,
  160.     section {
  161.         height: 48%;
  162.         margin-bottom: 1.096%;
  163.     }
  164.  
  165.     /* Layout Styles */
  166.  
  167.     aside,
  168.     section {
  169.         float: none;
  170.         width: auto;
  171.     }
  172.  
  173. }</script>
  174. </body>
  175. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top