Mobile fixes for homepage

sass/_project-sass/_project-Header.scss

@@ -17,9 +17,9 @@
   padding-bottom:27px;
 }
 
-.header-Content{
+.header-Content.content{
 	@media(max-device-width:480px), screen and (max-width:800px){
-	  padding:0;
+    padding: 14px 5% 20px 5%;
 	}
 }
 .blurb{background:#fff}
@@ -32,6 +32,7 @@
   @media (max-device-width:480px), screen and (max-width:800px){
     @include vendor(background-size, cover);
     min-height:2px;
+    background-position: 36%;
   }
 }
 
@@ -87,13 +88,14 @@
   @extend %kill-List;
   @media (max-device-width:480px), screen and (max-width:800px){
     margin-bottom:20px;
-    padding:20px!important;
+    padding:4px 20px 4px 14px;
   }
   
   li{
     padding-left:$spacing*9;
     padding-right:$spacing*3;
     margin-bottom:20px;
+    margin-left: 8px;
   }
   
   h2{
@@ -174,9 +176,6 @@
   
   label{
     color:#81b8c6;
-    @media (max-device-width:480px), screen and (max-width:800px){
-      font-size:70%
-    }
   }
   
   label#domain-name {
@@ -216,6 +215,10 @@
     padding:10px 25px;
     margin-top: 2em;
     font-size: 1em;
+    
+    @media (max-device-width:480px), screen and (max-width:800px){
+      margin-top: 0;
+    }
   }
 }
 
@@ -275,6 +278,7 @@
 	}
   
   a.small-Nav{
+    background: #65a0ad;
     display:none;
     position:fixed;
     right:0;

sass/_project-sass/_project-Main.scss

@@ -1020,6 +1020,11 @@ a.tag:hover {
   .row {
     margin: 5em 10%;
     padding: 0;
+    
+    @media (max-device-width:480px), screen and (max-width:800px){
+      margin: 4em 5%;
+    }
+    
     &:first-of-type {
       margin-top: 3.5em;
     }
@@ -1031,6 +1036,11 @@ a.tag:hover {
       padding-right: 30px;
       &.text {
         padding-top: 2em;
+        float: left;
+      }
+      
+      @media (max-device-width:480px), screen and (max-width:800px){
+        width: 100%;
       }
     }
     .screenshot {
@@ -1044,6 +1054,9 @@ a.tag:hover {
     &.right {
       .col {
         padding-right: 0;
+        &:first-child {
+          float: right;
+        }
         &.text {
           padding-right: 30px;
         }
@@ -1077,6 +1090,12 @@ a.tag:hover {
 .section.features {
   background: #4F7E89;
   text-align: center;
+  
+  .row:first-child {
+    @media (max-device-width:480px), screen and (max-width:800px){
+      margin-bottom: 0;
+    }
+  }
 }
 .section.features .col {
   padding-left: 40px;
@@ -1128,7 +1147,10 @@ a.tag:hover {
   margin-right: 30px;
   
   @media (max-device-width:480px), screen and (max-width:800px){
-    margin-top: 20px !important;
+    margin-top: 25px !important;
+    display:block;
+    float:none;
+    margin: 0px auto 0 auto;
   }
 }
 .section .logo.wired {

views/index.erb

@@ -251,11 +251,11 @@
   </div>
   
   <div class="row content right">
+    <div class="col col-50"><div class="screenshot"></div></div>
     <div class="col col-50 text">
       <h3>Leave comments on Neocities site profiles</h3>
       <p>Fate. It protects fools, little children, and ships named "Enterprise." I'll be sure to note that in my log. That might've been one of the shortest assignments in the history of Starfleet. Damage report!</p>
     </div>
-    <div class="col col-50"><div class="screenshot"></div></div>
   </div>
 
   <div class="row content">