Enable RWD for footer

Enable RWD in news section

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="row justify-content-center">
-                <div class="col-3">
+                <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>
@@ -396,10 +396,10 @@
     <div class="newsletter">
         <div class="container">
             <div class="row justify-content-between">
-                <div class="col-6 newsletter__title">
+                <div class="col-12 col-xl-6 newsletter__title">
                     Subscribe to our newsletter
                 </div>
-                <div class="col-6 oneline__form">
+                <div class="col-12 col-xl-6 oneline__form">
                     <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
                     <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
                             type="submit">Subscribe
@@ -411,7 +411,7 @@
     <div class="news">
         <div class="container">
             <div class="row">
-                <div class="col-4">
+                <div class="news__news col-12 col-sm-4">
                     <p class="news__title">
                         New in Release 2.8
                     </p>
@@ -435,7 +435,7 @@
                     </div>
                     <button class="rect-button rect-button--small">Go to Release Log</button>
                 </div>
-                <div class="col-4">
+                <div class="news__extensions col-12 col-sm-4">
                     <p class="news__title">
                         Popular Extensions
                     </p>
@@ -466,7 +466,7 @@
                     </div>
                     <button class="rect-button rect-button--small">Go to Marketplace</button>
                 </div>
-                <div class="col-4">
+                <div class="news__blog col-12 col-sm-4">
                     <p class="news__title">
                         New From the Blog
                     </p>
@@ -510,7 +510,7 @@
     <div class="footer">
         <div class="container">
             <div class="row">
-                <div class="footer__about col-4">
+                <div class="footer__about col-12 col-md-4">
                     <div class="brand">
                         <img class="brand__logo" src="img/logo.svg" alt="Forkio logo">
                         <span class="brand__name">Fork</span>
@@ -520,7 +520,7 @@
                         Lorem ipsum dolor sit amet, feugiat delicat liberavisse id cum no quo
                     </p>
                 </div>
-                <div class="footer__nav col-2">
+                <div class="footer__nav col-12 col-md-2">
                     <p class="footer__nav__title">Navigation</p>
                     <ul class="footer__nav__navbar">
                         <li><a href="#">Home</a></li>
@@ -530,13 +530,13 @@
                         <li><a href="#">Support</a></li>
                     </ul>
                 </div>
-                <div class="footer__contact col-3">
+                <div class="footer__contact col-12 col-md-3">
                     <p class="footer__contact__phone">347 567 78 90</p>
                     <p class="footer__contact__availability">Available from 12PM - 18PM</p>
                     <p class="footer__contact__city">New York, NY</p>
                     <p class="footer__contact__address">560 Judah St & 15th Ave, Apt 5<br/>San Francisco, CA, 230903</p>
                 </div>
-                <div class="footer__info col-3">
+                <div class="footer__info col-12 col-md-3">
                     <p class="footer__info__title">Info</p>
                     <p class="footer__info__description">
                         Wisia enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut

src/scss/_footer.scss

@@ -88,4 +88,13 @@
       color: $regular-text;
     }
   }
+
+  @media all and (max-width: $phone) {
+    &__about,
+    &__nav,
+    &__contact,
+    &__info {
+      padding: 0 30px;
+    }
+  }
 }

src/scss/_form.scss

@@ -5,6 +5,7 @@
   background-color: white;
   color: $regular-text;
 
+
   &::placeholder {
     font-family: Montserrat, sans-serif;
     font-size: 14px;
@@ -21,9 +22,11 @@
 
 .oneline__form__component--growing {
   width: 100%;
-  margin: 0 20px;
+  min-width: 100px;
+  margin: 0 10px;
 }
 
 .oneline__form__component--fixed {
   white-space: nowrap;
+  margin: 0 10px;
 }

src/scss/_navbar.scss

@@ -44,9 +44,13 @@ $shrinking-duration: 0.4s;
   font-family: Montserrat, sans-serif;
   font-size: 16px;
   font-weight: bolder;
-  margin: 0 20px;
   color: $primary-dark;
   transition: $hover-duration;
+  margin: 0 20px;
+
+  @media all and (max-width: $desktop-xl) {
+    margin: 0 5px;
+  }
 }
 
 .navbar__link:hover {

src/scss/_news.scss

@@ -41,4 +41,17 @@
   font-size: 13px;
   color: $regular-text;
   font-weight: 500;
+}
+
+@media all and (max-width: $phone) {
+  .news__news,
+  .news__extensions,
+  .news__blog {
+    padding: 0 30px;
+  }
+
+  .news__extensions,
+  .news__blog {
+    margin-top: 50px;
+  }
 }

src/scss/_newsletter.scss

@@ -4,12 +4,15 @@
 }
 
 .newsletter__title {
-  display: flex;
-  align-items: center;
   font-family: Montserrat, sans-serif;
   font-weight: bold;
   font-size: 30px;
   color: $primary-dark;
   text-transform: capitalize;
+  text-align: center;
+
+  @media all and (max-width: $desktop-xl) {
+    margin-bottom: 50px;
+  }
 }
 

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;
+    @media all and (min-width: $desktop-xl) {
-    margin-bottom: 75px;
+      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;