fix the testimonial card

Cloud-CV · Aug 16, 2021 · 8d4ebc9 · 8d4ebc9
1 parent 651ce59
commit 8d4ebc9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git a/frontend_v2/src/app/components/home/home.component.html b/frontend_v2/src/app/components/home/home.component.html
@@ -436,26 +436,26 @@ <h3 class="fw-light center">Sponsors</h3>
           <h3 class="fw-light center">Testimonials</h3>
         </div>
         <div class="testimonial-container">
-          <div class="card ev-card-panel ev-challenge-card z-depth-2 hoverable margin-bottom-cancel">
-          <div class="testimonial-body">
-            <span class="fs-24">{{ testimonialbody }}</span>
-          </div>
-        <div class="row">
-          <div class="testimonial-author fs-20">
-            <img src="../../../assets/images/profile.png" class="logo"/>
-            <div class="testimonial-details">
-              <h5 class="name fs-20">{{ testimonialauthor}}</h5>
-              <span class="orgname fs-18">{{ testimonialorg }}</span>
+        <div class="card ev-card-panel ev-challenge-card z-depth-2 hoverable margin-bottom-cancel">
+          <div class="row">
+            <div class="testimonial-author col s12 m3 l3 center fs-20">
+              <img src="../../../assets/images/profile.png" class="logo"/>
+              <div class="  testimonial-details">
+                <h5 class="name fs-20">{{ testimonialauthor}}</h5>
+                <span class="orgname fs-18">{{ testimonialorg }}</span>
+              </div>
+            </div>
+            <div class="col s12 m6 l9 testimonial-body">
+              <span class="fs-24">{{ testimonialbody }}</span>
             </div>
           </div>
-        </div>
-          <img src="assets/images/testimonials/arrow.png" (click)="testimonialNavigate()" class="testimonial-arrow-left" />
-          <img
-            src="assets/images/testimonials/arrow.png"
-            (click)="testimonialNavigate('right')"
-            class="testimonial-arrow-right"
-          />
-          <img src="assets/images/testimonials/quotes.png" class="testimonial-quotes" />
+            <img src="assets/images/testimonials/arrow.png" (click)="testimonialNavigate()" class="testimonial-arrow-left" />
+            <img
+              src="assets/images/testimonials/arrow.png"
+              (click)="testimonialNavigate('right')"
+              class="testimonial-arrow-right"
+            />
+            <img src="assets/images/testimonials/quotes.png" class="testimonial-quotes" />
         </div>
         </div>
       </div>

diff --git a/frontend_v2/src/app/components/home/home.component.scss b/frontend_v2/src/app/components/home/home.component.scss
@@ -100,30 +100,27 @@ p {
   height: 30%;
   padding-left: 5vw;
   .testimonial-body {
-    width: 70%;
-    margin-left: 15%;
-    padding-top: 120px;
-    padding-bottom: 50px;
+    padding-top: 150px;
+    padding-bottom: 70px;
+    width: 60%;
     span {
       color: #000;
       font-weight: $fw-light;
       font-style: italic;
-      padding: 15px;
     }
   }
 
   .testimonial-author {
+    padding-top: 100px;
     padding-bottom: 70px;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    margin-left: 5%;
       .logo {
         height: 100px;
         width: 100px;
       }
       .testimonial-details {
-        margin-left: 15px;
+        margin-top: 15px;
+        display: block;
       }
       .name {
         margin: 0;
@@ -150,12 +147,30 @@ p {
 
   .testimonial-quotes {
     position: absolute;
-    top: 15%;
-    left: 10%;
+    top: 22%;
+    left: 30%;
     height: 50px;
   }
 }
 
+@media only screen and (max-width: 600px) {
+  .testimonial-container {
+    .testimonial-author {
+      margin-left: 0;
+    }
+    .testimonial-body {
+      padding-top: 35px;
+      width: 80%;
+      margin-left: 10%;
+    }
+    .testimonial-quotes {
+      top: 280px;
+      left: 17%;
+
+    }
+  }
+}
+
 @include screen-medium {
   .testimonial-container {
     .testimonial-quotes {
@@ -169,10 +184,6 @@ p {
   .testimonial-container {
     background-size: 80 !important;
     padding-left: 0;
-    .testimonial-quotes {
-      height: 30px !important;
-      top: 12%;
-    }
     .testimonial-author {
       padding-bottom: 40px;
     }

diff --git a/frontend_v2/src/app/components/home/home.component.ts b/frontend_v2/src/app/components/home/home.component.ts
@@ -207,7 +207,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       scope.testimonialbody = scope.testimonials[scope.selected]['text'];
       scope.testimonialauthor = scope.testimonials[scope.selected]['author'];
       scope.testimonialorg = scope.testimonials[scope.selected]['org'];
-      element.style.marginLeft = '15%';
     }, 1000);
   };