homepage text and image alignment fixed, ref mozilla/sumo#26

akatsoulas · Jan 23, 2020 · 2c70e3f · 2c70e3f
1 parent dcd4e17
commit 2c70e3f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/kitsune/landings/jinja2/landings/home.html b/kitsune/landings/jinja2/landings/home.html
@@ -22,15 +22,15 @@ <h1 class="text-display-xl">{{ _('Search Mozilla Support') }}</h1>
   </div>
 </section>
 <section class="mzp-l-content sumo-page-section" id="main-content">
-  <div class="text-center">
+  <div class="text-center-to-left-on-large">
     <h2 class="text-display-xs">{{ _('Get Help') }}</h2>
     <p>{{ _('Pick your product') }}</p>
   </div>
   {{ product_cards(products) }}
 </section>
 
 <section class="mzp-l-content sumo-page-section">
-  <div class="text-center">
+  <div class="text-center-to-left-on-large">
     <h2 class="text-display-xs">{{ _('Featured Articles & Threads') }}</h2>
   </div>
   {% include "landings/includes/featured_articles.html" %}

diff --git a/kitsune/sumo/static/sumo/scss/base/_utilities.scss b/kitsune/sumo/static/sumo/scss/base/_utilities.scss
@@ -73,6 +73,14 @@
   text-align: center;
 }
 
+.text-center-to-left-on-large {
+  text-align: center;
+
+  @media #{p.$mq-lg} {
+    text-align: left;
+  }
+}
+
 .text-right {
   text-align: right;
 }

diff --git a/kitsune/sumo/static/sumo/scss/components/_card.scss b/kitsune/sumo/static/sumo/scss/components/_card.scss
@@ -76,6 +76,7 @@
 
   &--product {
     @include c.elevation-01;
+    display: flex;
     flex-direction: column;
   }