Dynamic Width

HTML

<section>
  <div>
    <span>This olive green box will be a reasonable size on a big monitor (50% of the screen), and will fill the screen (100%) if it gets smaller than 700px (i.e. mobile).<br><br>The transition is smooth. Go ahead, try resizing the window and see how pretty!<br><br>This is not as "clunky" as setting a CSS mobile screen profile, but uses jQuery which isn't always a good idea.<</span>
  </div>
</section>

CSS

section {
  width: 100%;
}
section div {
  width: 50%;
  height: 90px;
  margin: 0 auto;
  background-color: olivedrab;
  color: white;
  font-size: 4pt;
  -webkit-transition: width 1s ease;  				
  -moz-transition: width 1s ease;  				
  -o-transition: width 1s ease;  				
  transition: width 1s ease;
}
span {
  position: relative;
  top: 100px;
  color: #7d7d7d;
  font-size: 12pt;
}
@media (max-width:700px) {
  section div {
    width:100%;
    -webkit-transition: width 1s ease;  				
    -moz-transition: width 1s ease;  				
    -o-transition: width 1s ease;  				
    transition: width 1s ease;
  }
}