MBlore/Responsive.html

## Responsive.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Layout Example</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
	/* Default styling for mobile phones (mobile first CSS) */
    .container {
      display: grid;
      grid-template-columns: auto;
    }
    .box1, .box2 {
      border: 1px solid black;
    }

    /*
      This is my media query for desktop styling.
      When we detect desktop, we change the grid so the boxes appear side by side.
	  This styling code overrides the settings that we set above, but only on desktops!
    */
    @media only screen and (min-width: 600px) {
      .container {
        grid-template-columns: 500px auto;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">
      <p>Hello, I'm box 1, you probably want to put a menu in here.</p>
    </div>
    <div class="box2">
      <p>Hello, I'm box 2, this is probably where your body goes.</p>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>Layout Example</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<style>
	/* Default styling for mobile phones (mobile first CSS) */
	.container {
	display: grid;
	grid-template-columns: auto;
	}
	.box1, .box2 {
	border: 1px solid black;
	}

	/*
	This is my media query for desktop styling.
	When we detect desktop, we change the grid so the boxes appear side by side.
	This styling code overrides the settings that we set above, but only on desktops!
	*/
	@media only screen and (min-width: 600px) {
	.container {
	grid-template-columns: 500px auto;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="box1">
	<p>Hello, I'm box 1, you probably want to put a menu in here.</p>
	</div>
	<div class="box2">
	<p>Hello, I'm box 2, this is probably where your body goes.</p>
	</div>
	</div>
	</body>
	</html>