From 2a73fac5d314b5906c479f126ddb9b44ec8cc096 Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasongoo@gmail.com>
Date: Fri, 17 Oct 2014 15:57:07 -0700
Subject: [PATCH] Initial stab at making plan charts look okay at small screen
 sizes

---
 sass/_project-sass/_project-Main.scss | 26 +++++++++++++++++++++++++-
 views/plan/_pricing.erb               |  4 ++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index da91d4e8..f3fea985 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -842,9 +842,15 @@ a.tag:hover {
   }
 }
 
-.section.features h2, .section.features h3, .section.features p {
+.section.features h2, .section.features h3, .section.features p, .section.features a {
   color: #fff;
 }
+.section.features a {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
 .section.features .fa {
   margin-right: 10px;
 }
@@ -906,6 +912,7 @@ a.tag:hover {
 }
 .section.plans {
   background: #fff;
+  width: 100%;
 }
 .section.plans h2 {
   color:#4F7E89;
@@ -997,6 +1004,14 @@ a.tag:hover {
   margin: 2em 0 4em 0;
   width: 100%;
 }
+.plan-overview, .plan-chart {
+	@media(max-width:800px) {
+    font-size: 90%;
+  }
+	@media(max-device-width:480px), screen and (max-width:550px) {
+    font-size: 80%;
+  }
+}
 .plan-chart th {
   background: #D6D6D6;
   padding: 15px 0;
@@ -1027,6 +1042,10 @@ a.tag:hover {
     border-bottom: 1px dotted #bbb;
     cursor: help;
   }
+  
+  @media(max-device-width:480px), screen and (max-width:800px) {
+    width: 26%;
+  }
 }
 .plan-chart td:nth-child(even) {
   background: #F8F8F8;
@@ -1034,6 +1053,11 @@ a.tag:hover {
 .plan-chart .fa-check {
   color: #6CCC24;
 }
+.plan-overview .btn-Action, .plan-chart .btn-Action {
+  @media(max-device-width:480px), screen and (max-width:900px) {
+    padding: 7px 10px;
+  }
+}
 .selected {
   font-weight: bold;
 }
diff --git a/views/plan/_pricing.erb b/views/plan/_pricing.erb
index 830684d4..30fd770b 100644
--- a/views/plan/_pricing.erb
+++ b/views/plan/_pricing.erb
@@ -104,12 +104,12 @@
         <a href="/" class="btn-Action">Choose</a>
       </th>
       <th class="professional">
-        <h3>Cat Bus</h3>
+        <h3>Cat&nbsp;Bus</h3>
         <p>$20/mo</p>
         <a href="/" class="btn-Action">Choose</a>
       </th>
       <th class="professional">
-        <h3>Fat Cat</h3>
+        <h3>Fat&nbsp;Cat</h3>
         <p>$50/mo</p>
         <a href="/" class="btn-Action">Choose</a>
       </th>