Homepace responsiveness (fixed!)

Author: zackkrida

assets/css/styles.css

@@ -118,31 +118,56 @@
   overflow: hidden;
 
   .content {
-    z-index: 1;
-    position: relative;
-    width: 500px;
-    max-width: 100%;
-    margin-right: auto;
-    margin-left: 0;
-    padding-top: 96px !important; // to override vocab
+    padding: 0 $space-big !important; // :-(
+    padding-top: $space-bigger !important; // :-(
 
-    @include touch() {
-      padding: $space-small;
+    @include tablet() {
+      z-index: 1;
+      position: relative;
+      width: 500px;
+      max-width: 100%;
+      margin-right: auto;
+      margin-left: 0;
+      padding: 0;
+      padding-top: 96px !important; // to override vocab
     }
   }
 
   .img-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    text-align: right;
-    z-index: 0;
-
     img {
-      width: calc(100% - 400px); // container width - content width
-      margin-right: -4rem;
-      height: auto;
+      width: 100%;
+      margin-bottom: -6rem;
+    }
+
+    @include mobile {
+      &:after {
+        content: "";
+        position: absolute;
+        top: calc(100% + 4rem);
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        display: block;
+        background-color: whitesmoke;
+        height: 2000px;
+        z-index: 1;
+      }
+    }
+
+    @include tablet() {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      text-align: right;
+      z-index: 0;
+
+      img {
+        width: calc(100% - 400px); // container width - content width
+        margin-right: -4rem;
+        height: auto;
+      }
     }
   }
 
@@ -152,10 +177,22 @@
     z-index: 2;
   }
 
-  @include touch() {
-    .courses {
-      max-width: calc(100% - #{$space-small});
-      margin: 0 auto;
+  .courses {
+    @include mobile() {
+      .course {
+        margin-bottom: $space-normal;
+      }
+    }
+
+    @include touch() {
+      padding: 0 $space-big;
+    }
+
+    @include tablet() {
+      display: flex;
+      align-items: stretch;
+      column-gap: $space-larger;
+      margin-bottom: $space-bigger;
     }
   }
 
@@ -172,6 +209,12 @@
   }
 }
 
+.wp-theme-certificates .after-faq {
+  @include touch() {
+    margin-top: $space-xl;
+  }
+}
+
 // FAQ Page
 .wp-theme-certificates.page-template-template-faq {
   .faq-sidebar {

front/src/styles/modules.scss

@@ -75,3 +75,17 @@ span.icon {
 .navbar-brand {
   margin-left: 0 !important;
 }
+
+// Fix bad coluns ruining the entire layout
+main {
+  max-width: 100%;
+  display: block;
+  overflow-x: hidden;
+}
+
+.padding-touch-horizontal {
+  @include touch() {
+    padding-left: $space-big;
+    padding-right: $space-big;
+  }
+}

front/src/styles/shame.scss

@@ -14,7 +14,7 @@
         <p class="has-color-dark-slate-gray">
           <?php echo $faq['question']; ?>
         </p>
-        <span class="icon has-text-black">
+        <span class="margin-left-small icon has-text-black">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" class="caret">
             <path fill="currentColor" d="M1426.44 407.864q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45q19-19 45-19h896q26 0 45 19t19 45z"/>
           </svg>

inc/partials/home-faq.php

@@ -29,28 +29,26 @@
   <!-- Featured Courses -->
   <?php if( have_rows('featured_courses') ): ?>
     <div class="container">
-      <ul class="courses columns is-variable is-5 is-desktop">
+      <ul class="courses">
       <?php while( have_rows('featured_courses') ): the_row();
           $title = get_sub_field('title');
           $description = get_sub_field('description');
           $featured_course = get_sub_field('featured_course');
       ?>
-        <li class="column">
-          <div class="padding-bigger has-background-white body-normal">
-            <h2 class="title is-3"><?php echo $title; ?></h2>
-            <p class="margin-top-big"><?php echo $description; ?></p>
-            <?php if ($featured_course) : ?>
-              <a
-                class="has-text-success is-block has-text-weight-bold body-big margin-top-big"
-                href="<?php echo $featured_course; ?>">
-                See course
-              </a>
-            <?php endif; ?>
-          </div>
+        <li class="course padding-bigger has-background-white body-normal">
+          <h2 class="title is-3"><?php echo $title; ?></h2>
+          <p class="margin-top-big"><?php echo $description; ?></p>
+          <?php if ($featured_course) : ?>
+            <a
+              class="has-text-success is-block has-text-weight-bold body-big margin-top-big"
+              href="<?php echo $featured_course; ?>">
+              See course
+            </a>
+          <?php endif; ?>
         </li>
       <?php endwhile; ?>
       </ul>
-      <div class="additional-info padding-top-small padding-bottom-bigger body-bigger">
+      <div class="additional-info padding-top-small padding-bottom-bigger body-bigger padding-touch-horizontal">
         <?php echo $additional_info; ?>
       </div>
     </div>

inc/partials/home-hero.php

@@ -23,15 +23,15 @@
   include get_template_part('inc/partials/home', 'hero');
   ?>
 
-  <section class="has-background-grey-lighter padding-top-big padding-bottom-xl">
+  <section class="has-background-grey-lighter padding-top-big padding-bottom-xl padding-touch-horizontal">
     <div class="container">
 
       <div class="columns is-variable is-6 padding-bottom-xl">
         <div class="column is-two-thirds">
           <?php include get_template_part('inc/partials/home', 'faq'); ?>
         </div>
         <?php // Links Section (Hardcoded for now) ?>
-        <div class="column">
+        <div class="column after-faq">
           <h5 class="margin-bottom-normal"><a href="" class="has-text-forest-green">Course Content</a></h5>
           <p>Access current course content here. Unless otherwise noted, all course content is licensed CC BY 4.0. Also available in audio and remixed for a book publication!</p>
 
@@ -62,7 +62,7 @@
 
     </div>
   </section>
-  <section class="padding-top-xl padding-bottom-xxl">
+  <section class="padding-top-xl padding-bottom-xxl padding-touch-horizontal">
     <div class="container">
 
       <div class="padding-bottom-xl">