Responsive - Liveweave

<!DOCTYPE html>
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<title>Responsive Design Assignment</title>
</head>
<body>

<div id="container">
<h1>Installation Design</h1>
  <div class="authorContainer">
    <div class="authorName">by Joel Klein</div>
    <div class="dateTime">January 26th, 2015</div>
  </div>
  <img src="http://www.sva.edu/uploads/assets/headerslideitem/980x380/133355e87c140bbac3bde38649841d8bd9c59e8b.jpeg" />
  <p>Performance artist and SVA alumnus Christine Sun Kim (MFA 2006 Fine Arts) was recently selected as a TED Senior Fellow for 2015. This is her second consecutive Ted Fellowship.Deaf from birth, Sun Kim has a unique approach to working as a sound artist and composer (watch video below) and describes her perceiving process as being â€œshaped by American Sign Language interpreters, subtitles on television, written conversations on paper, emails, and text messages.â€</p>

<p>From the Ted blog: â€œChristine uses the medium of sound through technology to investigate and rationalize her relationship with noise and spoken language. A Korean-American artist and educator, she is working on a number of new sound installations, as well as a new listening device in which your speed of walking affects the audio you hear.â€</p>

<p>The TED Fellows program chooses courageous, accomplished young innovators from around the world to raise international awareness of their work, which ranges widely from open science to new media art to social entrepreneurship. TED Fellows participate in either the TED Conference in Long Beach, California or the TEDGlobal event in Edinburgh, U.K. In addition to attending the conferences, Fellows participate in specially designed pre-conference programs with training from the worldâ€™s experts in spreading great ideas.</p>
  
  <div class="button"><a href="http://www.sva.edu" target="_blank">Visit SVA</a></div>
  
</div>

</body>
</html>

html{
  font-family: 'Lato', sans-serif;
}
#container{
  width: 98%;
  margin:  0px auto;
}
h1{
  border-bottom: 1px solid orange;
  color: #362400;
  margin-bottom: 2px;
  font-weight: 700;
}
p{
  font-weight: 300;
}

img{
  width: 98%;
  border: 1px solid #CCC;
}

.dateTime{
  color: #555;
  font-size: 10pt;
  font-weight: 300;
}

.authorContainer{
  margin-bottom: 5px;
}

.button{
  background-color: orange;
  width: 16%px;
  padding: 8px;
  border-radius: 9px;
  border: 1px solid #CCC;
}
.button a{
  text-decoration: none;
  color: #000;
  font-weight: 900;
}

/* Desktop Breakpoint: For screens larger than 1025px wide */
@media screen and (min-width: 1025px) {
    body {
        background-color: white;
    }
   
}

/* Tablet Portrait Breakpoint: In portrait mode the iPad is 768px wide */
@media screen and (max-width: 768px) {
    body {
        background-color: white;
    }
  
}

/* Phone Portrait Breakpoint: In portrait mode the iPhone is 320px wide */
@media screen and (max-width: 320px) {
    body {
        background-color: white;
    }
  
}