Merge pull request #467 from openforge/fix/carousel-again

fix(app-partners): update carousel positioning and height

Author: Wholloran

src/pages/app-partners/app-partners.scss

@@ -95,7 +95,6 @@
 
     .header {
       margin: 4rem auto 2rem;
-      max-width: 768px;
       text-align: center;
 
       @include media-breakpoint-down(sm) {
@@ -110,6 +109,7 @@
         letter-spacing: 2.1px;
         line-height: 45px;
         text-align: center;
+        margin-bottom: 3rem;
 
         @include media-breakpoint-down(sm) {
           color: #333333;
@@ -123,34 +123,6 @@
         }
       }
     }
-
-    .line-title {
-      display: block;
-      position: relative;
-
-      &:before,
-      &:after {
-        content: '';
-        display: inline-block;
-        height: 1px;
-        background: gray;
-        width: 50%;
-        position: relative;
-        vertical-align: middle;
-
-        @include media-breakpoint-down(sm) {
-          display: none;
-        }
-      }
-      &:before {
-        left: -0.5em;
-        margin-left: -50%;
-      }
-      &:after {
-        right: -0.5em;
-        margin-right: -50%;
-      }
-    }
   }
 
   .cta {
@@ -244,6 +216,12 @@
 
   .carousel-inner {
     padding: 25px 0;
+    height: 450px;
+
+    @include media-breakpoint-down(sm) {
+      height: 550px;
+    }
+    
   }
 
   .carousel-item-col {

src/pages/app-partners/app-partners.tsx

@@ -60,60 +60,57 @@ export class AppPartners {
         </header>
 
         <section id="trusted-partners" class="trusted-partners">
-          <div>
             <div class="row header">
               <div class="col-12">
                 <h2>
                   <app-translate keyword="partners.trusted.title" />
                 </h2>
               </div>
-            </div>
-
-            <div class="row">
-              <div class="col-12 text-center">
+ 
+            <div class="col-12 text-center">
                 <div class="carousel slide" id="partnersCarousel">
                   <div class="carousel-inner">
-                    <div class="row carousel-item active">
+                    <div class="carousel-item active">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-ionic-logo-landscape.png" class="img-fluid" />
                         <p>
                           <app-translate keyword="partners.trusted.ionic" />
                         </p>
                       </div>
                     </div>
-                    <div class="row carousel-item">
+                    <div class="carousel-item">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-1776-logo.png" class="img-fluid" />
                         <p>
                           <app-translate keyword="partners.trusted.t1776" />
                         </p>
                       </div>
                     </div>
-                    <div class="row carousel-item">
+                    <div class="carousel-item">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-strapi-logo.png" class="img-fluid" />
                         <p>
                           <app-translate keyword="partners.trusted.strapi" />
                         </p>
                       </div>
                     </div>
-                    <div class="row carousel-item">
+                    <div class="carousel-item">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-215-logo.png" class="img-fluid" />
                         <p>
                           <app-translate keyword="partners.trusted.t215Marketing" />
                         </p>
                       </div>
                     </div>
-                    <div class="row carousel-item">
+                    <div class="carousel-item">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-financial-gps-logo.png" class="img-fluid" />
                         <p>
                           <app-translate keyword="partners.trusted.finantialGPS" />
                         </p>
                       </div>
                     </div>
-                    <div class="row carousel-item">
+                    <div class="carousel-item">
                       <div class="col-12 carousel-item-col">
                         <img src="/assets/partners-drexel-logo.png" class="img-fluid" />
                         <p>
@@ -132,7 +129,6 @@ export class AppPartners {
                   </ol>
                 </div>
               </div>
-            </div>
             <div class="row carousel-arrows">
               <a class="col-6 left carousel-control" href="#partnersCarousel" data-slide="prev">
                 <i class="fa fa-chevron-left" />