mobile fixes

mdn · Feb 3, 2024 · 75dbc5e · 75dbc5e
1 parent 3821fe2
commit 75dbc5e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
@@ -71,13 +71,22 @@
     .landing-about {
       display: grid;
       grid-template-areas:
-        "li li "
-        "h2 p "
-        "h2 p "
-        "h2 p ";
-      grid-template-columns: 1fr 1fr;
+        "li"
+        "h2"
+        "p"
+        "p"
+        "p";
+      grid-template-columns: 1fr;
       margin: 0 auto 3rem;
       max-width: min(var(--max-width), 74rem);
+      @media screen and (min-width: $screen-md) {
+        grid-template-areas:
+          "li li "
+          "h2 p "
+          "h2 p "
+          "h2 p ";
+        grid-template-columns: 1fr 1fr;
+      }
 
       h2 {
         grid-area: h2;
@@ -92,10 +101,12 @@
           background-color: var(--background-primary);
           box-shadow: var(--module-shadow);
           display: flex;
+          flex-wrap: wrap;
           grid-area: li;
-          height: 5rem;
           justify-content: space-around;
           margin: auto;
+          min-height: 5rem;
+          padding: 1rem;
           transform: translateY(-1rem);
           width: 100%;
 
@@ -191,10 +202,17 @@
         display: grid;
         gap: 3rem 8rem;
         grid-template-areas:
-          "beginner advanced"
-          "employ educator";
+          "beginner"
+          "advanced"
+          "employ"
+          "educator";
         margin: 0 auto;
         max-width: 52rem;
+        @media screen and (min-width: $screen-md) {
+          grid-template-areas:
+            "beginner advanced"
+            "employ educator";
+        }
 
         > li {
           align-items: center;

diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
@@ -21,21 +21,34 @@
     ol.modules-list-list {
       display: grid;
       grid-template-areas:
-        "a   b   c   spacer"
-        "hr  hr  hr  hr"
-        "mod mod mod mod"
-        "t   t   t   t";
-
-      grid-template-columns: max-content max-content max-content auto;
+        "a"
+        "b"
+        "c"
+        "hr"
+        "mod"
+        "t";
+
+      grid-template-columns: auto;
       margin: 0;
       padding: 0;
+      @media screen and (min-width: $screen-md) {
+        grid-template-areas:
+          "a   b   c   spacer"
+          "hr  hr  hr  hr"
+          "mod mod mod mod"
+          "t   t   t   t";
+
+        grid-template-columns: max-content max-content max-content auto;
+      }
 
       hr {
         border: none;
-        border-top: 1px solid var(--text-primary);
         grid-area: hr;
         margin: 0 0 1.5rem;
         width: 100%;
+        @media screen and (min-width: $screen-md) {
+          border-top: 1px solid var(--text-primary);
+        }
       }
 
       li {
@@ -64,15 +77,19 @@
           > label,
           > input {
             grid-area: b;
-            margin-left: 2rem;
+            @media screen and (min-width: $screen-md) {
+              margin-left: 2rem;
+            }
           }
         }
 
         &:nth-child(4) {
           > label,
           > input {
             grid-area: c;
-            margin-left: 2rem;
+            @media screen and (min-width: $screen-md) {
+              margin-left: 2rem;
+            }
           }
         }