<!DOCTYPE html>
<html lang="en-US">
  <head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JGraber</title>

    <style type="text/css">
    @media screen and (max-width: 400px) {
	  .boxa {
        width: 150px;
        height: 150px;
        border-radius: 30px;
        text-align: center; 
	    background-color: red;
	  }
	}
	@media screen and (min-width: 400px) {
	  .boxa {
        width: 150px;
        height: 150px;
        border-radius: 30px;
        text-align: center; 
	    background-color: green;
	 }
	}
	</style>
  </head>
  
  <body>
   <h1>Media Query</h1>
   <pre>
@media screen and (max-width: 400px) {
  .boxa {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    text-align: center; 
    background-color: red;
  }
}
@media screen and (min-width: 400px) {
  .boxa {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    text-align: center; 
    background-color: green;
  }
}   
   </pre>

<div class="boxa">
Box A
</div>

&nbsp;

  </body>
</html>

Add example for media queries
Add example for media queries
