CodePen Embed

Live
​x
 
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Formularze</title>
    <style>
      * {
        box-sizing: border-box;
      }
​
      section {
        border: 1px solid lightslategrey;
        width: 100%;
        text-align: center;
        margin: 10px 0;
        padding: 5px;
      }
​
      .box {
        height: 50px;
        margin: 10px;
        display: inline-block;
      }
​
      .top .box {
        width: 40%;
        background: lightcoral;
      }
​
      .middle .box {
        width: 20%;
        background: lightseagreen;
      }
​
      .bottom .box {
        width: 80%;
        background: lightslategray;
      }
​
      /* Media query celujący w ekrany o rozdzielczości maksymalnie 768px */
      @media screen and (max-width: 768px) {
        .top .box {
          width: 100%;
          margin: 10px 0;
        }
      }
​
      @media screen and (max-width: 500px) {
        .middle .box {
          width: 45%;
          margin: 10px 0;
        }
      }
​
      @media screen and (max-width: 360px) {
        /* Wewnątrz media query możemy umieszczać wiele selektorów i styli CSS */
        .middle .box {
          width: 100%;
          margin: 10px 0;
        }
​
        .bottom {
          display: none;
        }
      }
​
      /* Możemy używać wielu operatorów - tutaj dwukrotnie użyty "and" */
      @media screen and (min-width: 500px) and (max-width: 768px) {
        section {
          border: 4px solid plum;
        }
      }
    </style>
  </head>
  <body>
    <section class="top">
      <div class="box"></div>
      <div class="box"></div>
    </section>
    <section class="middle">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </section>
    <section class="bottom">
      <div class="box"></div>
    </section>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.