Enable RWD for about section

Enable RWD for navbar and header

src/index.html

@@ -113,12 +113,13 @@
     <div class="about">
         <div class="container">
             <div class="row">
-                <div class="about__features col-6">
+                <div class="about__features col-12 col-xl-6">
+                    <p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
                     <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                             <img src="img/features/1.png" alt=""/>
                         </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                             <p class="feature__title">
                                 Created to Make The Web Better
                             </p>
@@ -130,10 +131,10 @@
                         </div>
                     </div>
                     <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                             <img src="img/features/2.png" alt=""/>
                         </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                             <p class="feature__title">
                                 Incredibly Powerful Tool
                             </p>
@@ -145,10 +146,10 @@
                         </div>
                     </div>
                     <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                             <img src="img/features/3.png" alt=""/>
                         </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                             <p class="feature__title">
                                 Experimental Stuff
                             </p>
@@ -160,10 +161,10 @@
                         </div>
                     </div>
                     <div class="row feature">
-                        <div class="col-3 feature__icon">
+                        <div class="col-4 col-md-3 feature__icon">
                             <img src="img/features/4.png" alt=""/>
                         </div>
-                        <div class="col-9">
+                        <div class="col-8 col-md-9">
                             <p class="feature__title">
                                 Created to Make The Web Better
                             </p>
@@ -175,8 +176,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="about__what-you-get col-6">
-                    <p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
+                <div class="about__what-you-get col-12 col-xl-6">
+                    <p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
                     <img src="img/features/editor.png" alt="Revolutionary editor">
                 </div>
             </div>

src/scss/_about.scss

@@ -1,7 +1,12 @@
 .about {
   background-color: $background-light;
-  padding: 75px 0 0 30px;
-  height: 710px;
+
+  @media all and (max-width: $desktop-xl) {
+    .about {
+      padding: 75px 0 0 30px;
+      height: 710px;
+    }
+  }
 }
 
 .about__title {
@@ -13,4 +18,23 @@
   &--no-wrap {
     white-space: nowrap;
   }
+
+  &--desktop-xl {
+    display: block;
+  }
+
+  &--desktop {
+    display: none;
+    text-align: center;
+  }
+
+  @media all and (max-width: $desktop-xl) {
+    &--desktop-xl {
+      display: none;
+    }
+
+    &--desktop {
+      display: block;
+    }
+  }
 }

src/scss/_feature.scss

@@ -3,7 +3,7 @@
 }
 
 .feature__icon {
-  text-align: center;
+  text-align: left;
 }
 
 .feature__title {

src/scss/_header.scss

@@ -21,6 +21,13 @@
   margin-bottom: 0;
 }
 
+@media all and (max-width: $phone) {
+  .header__subtitle {
+    font-size: 24px;
+    text-transform: capitalize;
+  }
+}
+
 .header__description {
   margin-top: 20px;
   font-family: Montserrat, sans-serif;