From 59dd5095b11b160159345614be7059946908f7e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Pluta?= <the.orleander@gmail.com>
Date: Mon, 16 Apr 2018 14:20:29 +0200
Subject: [PATCH] Enable RWD on pricing section

---
 src/index.html         | 10 +++++-----
 src/scss/_pricing.scss | 20 ++++++++++++++++----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index fe56e4e..7ea1149 100644
--- a/src/index.html
+++ b/src/index.html
@@ -329,8 +329,8 @@
     <div class="pricing">
         <p class="pricing__title">Fork Subscription Pricing</p>
         <div class="container">
-            <div class="row">
-                <div class="col-3">
+            <div class="row justify-content-center">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Students</p>
                         <p class="price__value">$29</p>
@@ -342,7 +342,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Professional</p>
                         <p class="price__value">$59</p>
@@ -354,7 +354,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Agency</p>
                         <p class="price__value">$99</p>
@@ -366,7 +366,7 @@
                         </a>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-8 col-xl-3">
                     <div class="price">
                         <p class="price__title">Enterprise</p>
                         <p class="price__value">$159</p>
diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss
index 2686207..3592843 100644
--- a/src/scss/_pricing.scss
+++ b/src/scss/_pricing.scss
@@ -21,12 +21,19 @@
   height: 450px;
   transition: $hover-duration;
 
+  @media all and (max-width: $desktop-xl) {
+    margin-top: 7px;
+    margin-bottom: 7px;
+  }
+
   &:hover {
-    margin-top: 70px;
-    margin-bottom: 75px;
+    @media all and (min-width: $desktop-xl) {
+      margin-top: 70px;
+      margin-bottom: 75px;
+      height: 530px;
+    }
     background-color: rgba(0, 0, 0, 0.06);
     transition: $hover-duration;
-    height: 530px;
 
     & > .price__title {
       background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
   padding-bottom: 10px;
   background-color: rgba(255, 255, 255, 0.15);
   position: absolute;
+  left: 0;
+  text-align: center;
+  right: 0;
   bottom: 35px;
-  left: 20%;
+  margin: auto;
+  display: block;
+  width: 80%;
   font-family: Montserrat, sans-serif;
   font-weight: 500;
   font-size: 16px;