Redesign testimonial layout for small screens (#113)

Author: MaxGraey

src/.vuepress/components/Testimonials.vue

@@ -28,36 +28,33 @@ export default {
   border: 0;
 }
 .testimonial {
-  position: relative;
-  padding: 1rem 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.5rem 0;
+  margin: 0 0 0 30px;
 }
 .testimonial .logo {
-  position: absolute;
-  left: 30px;
-  top: 20px;
   border-radius: 50%;
-  width: 64px;
-  height: 64px;
+  width: 76px;
+  height: 76px;
   border: 1px solid #fff;
   box-shadow: 0 0 0 1px #007acc;
 }
 .testimonial p {
-  margin: 0 40px 0 110px;
+  margin: 0 30px 0 30px;
   text-align: justify;
 }
 @media only screen and (max-width: 720px) {
+  .testimonial {
+    flex-direction: column;
+  }
   .testimonial .logo {
-    position: relative;
-    float: left;
-    top: 3px;
-    left: 0;
-    right: 0;
-    width: 48px;
-    height: 48px;
-    margin: 0 10px 0 0;
+    width: 90px;
+    height: 90px;
   }
   .testimonial p {
-    margin: 0;
+    margin: 30px 0 10px 0;
   }
 }
 </style>