media queries

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Media Queries</title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Site Name</h1>
    </header>
    <div class="wrapper clearfix">
        <div class="container">
            <main>
                <h2>Heading</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </main>
            <div class="secondary">
                <h2>Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.</p>
                <p>Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
            </div>
            <!-- .secondary-->
        </div>
        <!-- .container-->
    </div>
    <!-- .wrapper-->
    <footer>
        <small><a href="https://opensource.org/licenses/MIT">MIT</a></small>
    </footer>
</body>

</html>

styles.css

body {
  background: #eeeeee;
  font-size: 16px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  margin: 0;
}

a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 1080px;
}

.wrapper {
  padding: 1em 0;
  background: #ffffff;
}


/* Media Queries
------------------------------------------*/

@media screen and (min-width: 48em) {
  h1 {
    font-size:3em;
  }
  .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  main {
    width: 60%;
  }
  .secondary {
    box-sizing: border-box;
    width: 36%;
    border-radius: 5px;
    padding: .5em;
    border: 1px dotted red;
  }
}