Enable RWD for testimonials

Enable RWD for social buttons

src/index.html

@@ -243,21 +243,21 @@
     <div class="social container">
         <div class="row justify-content-center">
             <div class="social__content col-10">
-                <div>
+                <div class="social__github">
                     <button class="rect-button rect-button--github rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-github"></span>
                         GitHub
                     </button>
                     <p class="social__stats">7 352 Followers</p>
                 </div>
-                <div>
+                <div class="social__twitter">
                     <button class="rect-button rect-button--twitter rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-twitter"></span>
                         Twitter
                     </button>
                     <p class="social__stats">136 312 Followers</p>
                 </div>
-                <div>
+                <div class="social__facebook">
                     <button class="rect-button rect-button--facebook rect-button--fixed-width">
                         <span class="rect-button__icon fab fa-facebook-f"></span>
                         Facebook
@@ -271,7 +271,7 @@
         <p class="testimonials__h1">People are talking about fork</p>
         <div class="testimonials__content container">
             <div class="testimonials__row row">
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/1.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Sed vestibulum scelerisque urna, eu finibus leo facilisis sit amet. Proin id dignissim
@@ -279,14 +279,14 @@
                         Sed varius urna et pulvinar venenatis.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/2.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Donec euismod dolor ut ultricies consequat. Vivamus urna ipsum, rhoncus molestie neque ac,
                         mollis eleifend nibh.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/3.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         In efficitur in velit et tempus. Duis nec odio dapibus, suscipit erat fringilla, imperdiet
@@ -296,7 +296,7 @@
                 </div>
             </div>
             <div class="testimonials__row row">
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/4/1.png" alt="Smashing Magazine">
                     <img class="testimonial__logo" src="img/testimonials/4/2.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
@@ -305,7 +305,7 @@
                         Sed varius urna et pulvinar venenatis.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/5.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Praesent ut eros tristique, malesuada lectus vel, lobortis massa. Nulla faucibus lorem id
@@ -313,7 +313,7 @@
                         consequat faucibus.
                     </p>
                 </div>
-                <div class="testimonial col-4">
+                <div class="testimonial col-12 col-xl-4">
                     <img class="testimonial__logo" src="img/testimonials/6.png" alt="Smashing Magazine">
                     <p class="testimonial__text">
                         Fusce pharetra erat id odio blandit, nec

src/scss/_social.scss

@@ -4,6 +4,10 @@
   padding-bottom: 80px;
   display: flex;
   justify-content: space-between;
+
+  @media all and (max-width: $tablet) {
+    flex-direction: column;
+  }
 }
 
 .social__stats {
@@ -13,4 +17,13 @@
   font-size: 14px;
   color: $regular-text;
   text-align: center;
+}
+
+.social__github,
+.social__twitter,
+.social__facebook {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }

src/scss/_testimonials.scss

@@ -1,6 +1,6 @@
 .testimonials {
   position: relative;
-  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 30% / contain;
+  background: $background-violet url(../img/testimonials/testimonials.png) no-repeat 50% 0;
 }
 
 .testimonials__h1 {
@@ -15,12 +15,20 @@
 
 .testimonials__row {
   padding-bottom: 100px;
+  @media all and (max-width: $desktop) {
+    padding: 0 10px;
+    margin: 0;
+  }
 }
 
 .testimonial {
   position: relative;
   text-align: center;
   min-height: 170px;
+
+  @media all and (max-width: $desktop) {
+    margin-bottom: 50px;
+  }
 }
 
 .testimonial__logo {
@@ -28,8 +36,10 @@
 }
 
 .testimonial__text {
-  position: absolute;
-  bottom: 0;
+  @media all and (min-width: $desktop-xl) {
+    position: absolute;
+    bottom: 0;
+  }
   font-family: Source Sans Pro, sans-serif;
   font-size: 16px;
   font-weight: bold;