The Web Design Survival Guide | Media Queries

by todaly1

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the Document</title>
<link rel="stylesheet" href="css-for-media-queries.css">
</head>
<body>
  <header>header</header>
  <main>
    <article>article</article>
    <aside>aside</aside>
  </main>
  <footer>footer</footer> 
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

header{
  width: 94%;
  height: 100px;
  border: 1px solid #00ffff;
  background-color:#ccc;
  margin: 30px auto 10px auto;
  padding-top: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-family: Helvetica, Arial, "sans-serif";
  text-align: center;
}

main{
  width:94%;
  margin: 10px auto 10px auto;

}

article{
  width: 70%;
  min-height: 600px;
  border: 1px solid #00ffff;
  background-color:#ccc;
  margin-bottom:10px;
  padding-top: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-family: Helvetica, Arial, "sans-serif";
  text-align: center;
  float: left;
}

aside{
  width: 29%;
  min-height: 600px;
  border: 1px solid #00ffff;
  background-color: #ccc;
  margin-bottom:10px;
  padding-top: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-family: Helvetica, Arial, "sans-serif";
  text-align: center;
  float: right;
}

footer{
  width: 94%;
  height: 70px;
  border: 1px solid #00ffff;
  background-color:#ccc;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-family: Helvetica, Arial, "sans-serif";
  text-align: center;
  clear: left;
}

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {

  article{
    width: 49%;
  }

  aside{
    width: 49%;
  }

}

@media only screen and ( max-width: 767px ) {

  article{
    width: 100%;
  }

  aside{
    width: 100%;
}

}