Site title and description won't scale

I’m having difficulty scaling the site title and description in my header for use on a smart phone

My site is: cottrellhomes.com and am using the Canvas theme and am working in a child theme.

I’ve used @media queries to scale the two images in the header down, but have not had any luck with the text.

Here is the relevant php code:

<header id="header" class="col-full">

<div id="exitrealty">
  <img src="wp-content/themes/canvas-child/images/Final Logo 120.png"  />
	</div>

<div id="jcottrell">
  <img src="wp-content/themes/canvas-child/images/pic 175px.png"  />
	</div>

		<?php woo_header_inside(); ?>

<div id="info">
<h1><a class="customtitle" href="http://www.cottrellhomes.com/" title="CottrellHomes.com">Justin Cottrell<a></h1>
<h4><class="description">NYS Licensed Realtor - Westchester Real Estate</h4>
</div>
	</header>

And CSS:

/* RESPONSIVE SCALING */

@media only screen and (max-width: 600px) {
#exitrealty {
width: 23%;
height: 23%;
padding: 0 0 0 1.7em;
}
}

@media only screen and (max-width: 600px) {
#jcottrell {
width: 18%;
height: 18%;
position: relative;
right: 10em;
padding: .1em 0 0 0
}
}

/*   HEADER IMAGES & TEXT */

#exitrealty {
  float: left;
  position: relative;
  right: 3.2em;
  top: 1.5em;
  margin: 0 0 0 0; }

#jcottrell {
  float: right;
  position: relative;
  right: 4em;
  top: .02em; }

#info {
  float: center;
  position:relative;
  left: 5em;
  top: 2em;
  margin: 0 0 0 0; }

.customtitle {
  color: #222 !important;
  font-size: 2em;
  line-height: 1em;
  text-align: center;
  float: center;
  margin: 0 0 0 0; }

.description {
color: #222;
  font-size: 2em;
  line-height: 1em;
  text-align: center;
  text-transform: none;
  float: center;
  margin: 0 0 0 0;
 }

Any insight is greatly appreciated!