diff --git a/css/phone.css b/css/phone.css
new file mode 100644
index 00000000000..03751979f8c
--- /dev/null
+++ b/css/phone.css
@@ -0,0 +1,5 @@
+/* Smartphones (portrait) */
+@media only screen and (max-width: 480px) {
+  body { font-size: 12px;}
+  header p { padding-left: 4.5em;}
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index ea49bda6578..8024aadc003 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,49 +1,24 @@
-html {
-  font-size: 100%;
-  overflow-y: scroll;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: none;
-}
-body { margin: 0; font-size: 14px; line-height: 1.61; font-weight: 400; }
-body, button, input, select, textarea { font-family: 'Open Sans', sans-serif; color: #333; }
-
-a { color: #12C; }
-a:visited { color: #61C; }
-a:focus { outline: thin dotted; }
-a:hover, a:active { color: #c00; outline: 0; }
-
-b, strong { font-weight: bold; }
-pre, code { font-family: monospace, monospace; font-size: 1em; }
-ul, ol { margin: 1em 0; padding: 0 0 0 20px; }
-img { border: 0; max-width: 100%; }
-
-body { background: #fff; }
-header, footer, .container { max-width: 45em; margin: 0 auto; }
-
-header { padding: 0 0.5em; color: #C90B0B; }
-header img { border-radius: 40px; float: left; }
-header p { font-size:1.5em; font-weight: bold; padding-left: 4em;}
-header p span { font-size: 0.8em; font-weight: normal;}
-
-.hero { padding: 2em; background-color: #f8f8f8; font-size:1.2em;
-  border-bottom: 1px solid #ccc;
-  border-top: 1px solid #ccc;
-}
-
-.content { padding: 1em 1em; }
-.content li { list-style-type: none; font-size: 1.1em;}
-li img { float:left; padding-right: 1em; }
-li p { font-size: 0.9em; font-style: italic; }
-
-footer {
-  padding: 0 0.5em;
-  border-top: 1px solid #ccc;
-}
-footer span { float: right; font-style: italic; }
-
-/* Smartphones (portrait) */
-@media only screen and (max-width: 480px) {
-  body { font-size: 12px;}
-  header p { padding-left: 4.5em;}
-}
+html{font-size: 100%;overflow-y: scroll;-webkit-tap-highlight-color: rgba(0,0,0,0);-ms-text-size-adjust: 100%;-webkit-text-size-adjust: none;}
+body{margin:0;font-size:14px;line-height:1.61;font-weight: 400;}
+body,button,input,select,textarea{ font-family:'Open Sans',sans-serif;color:#333;}
+a{color:#12C;}
+a:visited{color:#61C}
+a:focus{outline:thin dotted}
+a:hover,a:active{color:#c00;outline:0}
+b,strong{font-weight:bold}
+pre,code{font-family:monospace,monospace;font-size:1em}
+ul,ol{margin:1em 0; padding:0 0 0 20px}
+img{border:0;max-width:100%}
+body{background:#fff}
+header,footer,.container{max-width:45em;margin:0 auto}
+header{padding:0 0.5em;color:#C90B0B}
+header img{border-radius:40px;float:left}
+header p{font-size:1.5em;font-weight:bold;padding-left:4em}
+header p span{font-size:0.8em;font-weight:normal}
+.hero{padding:2em;background-color:#f8f8f8;font-size:1.2em;border-bottom:1px solid #ccc;border-top:1px solid #ccc;}
+.content{padding:1em 1em}
+.content li{list-style-type:none;font-size:1.1em}
+li img{float:left;padding-right: 1em}
+li p {font-size: 0.9em;font-style: italic}
+footer{padding: 0 0.5em;border-top:1px solid #ccc;}
+footer span{float:right;font-style:italic}
diff --git a/index.html b/index.html
index 01ebf055996..ffb4711fed2 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,10 @@
     <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
 
     <link href="css/style.css" rel="stylesheet">
-    <link href="css/print.css" rel="stylesheet">
+    <link href="css/print.css" media="print" rel="stylesheet">
+    <link href="css/phone.css" media="screen and (max-width:480px) and (orientation:portrait)" rel="stylesheet">
 
-    <script>
+    <script async>
       (function(w,g){w['GoogleAnalyticsObject']=g;
       w[g]=w[g]||function(){(w[g].q=w[g].q||[]).push(arguments)};w[g].l=1*new Date();})(window,'ga');
 
@@ -21,7 +22,7 @@
       ga('create', 'UA-XXXX-Y');
       ga('send', 'pageview');
     </script>
-    <script src="http://www.google-analytics.com/analytics.js"></script>
+    <script async src="http://www.google-analytics.com/analytics.js"></script>
     <script async src="js/perfmatters.js"></script>
   </head>
 
@@ -30,12 +31,10 @@
       <a href="/"><img src="img/profilepic.jpg"></a>
       <p>Cameron Pittman<br><span>Course Developer</span></p>
     </header>
-
     <div class="container">
       <div class="hero">
         <strong>I love web development!</strong> This is a template for a simple portfolio. I decided to use it to showcase a few Udacity courses I've taken and some teaching work, but you can use it to showcase any kind of project that you want the world to see :) <br> Contact me: me@email.com
       </div>
-
       <div class="content">
         <ul>
           <li>
@@ -43,19 +42,16 @@
             <a href="project-2048.html">Build Your Own 2048!</a>
             <p>I made my own version of 2048. How cool is that!?</p>
           </li>
-
           <li>
             <img src="https://lh6.ggpht.com/f_0W8h__3G99CWTjnMjD8BUKm7yp2-wJyApLtTwFoFtlal2ULf_JgHIsOQq2NiYfKOdMlXlMHDKNo5XVZLs=s100">
             <a href="project-webperf.html">Website Performance Optimization</a>
             <p>Hey... this class looks familiar.</p>
           </li>
-
           <li>
             <img src="https://lh5.ggpht.com/IKdCmTWn8a2nMhlwMYzryvzRN5CUZAOBr4tDrEAbszV7TIFe9pRAInA4kkYcgTXwrifJsBEsq1agTueuu-g=s100">
             <a href="project-mobile.html">Mobile Web Development</a>
             <p>Making mobile apps isn't so hard after all.</p>
           </li>
-
           <li>
             <img style="width: 100px;" src="views/images/pizzeria.jpg">
             <a href="views/pizza.html">Cam's Pizzeria</a>
@@ -63,7 +59,6 @@
           </li>
         </ul>
       </div>
-
       <footer>
         <p>&copy; Web Performance 2014 <span id="crp-stats"></span></p>
       </footer>