feat(tp): responsive design for mobile devices

opengovsg · Sep 10, 2020 · f072733 · f072733
1 parent d0ca036
commit f072733
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/public/assets/transition-page/styles/transition-page.css b/public/assets/transition-page/styles/transition-page.css
@@ -18,7 +18,6 @@ body {
 .top-half {
   background: #384a51;
   height: 50vh;
-  min-height: 380px;
   position: relative;
 }
 
@@ -119,13 +118,23 @@ body {
 }
 
 @media only screen and (max-width: 512px) {
+  .top-half {
+    height: 30vh;
+  }
+
   .top-half-content {
     bottom: -58px;
     width: 80%;
   }
 
   .top-half-content h3 {
-    margin-bottom: 16px;
+    margin-bottom: 12px;
+    font-size: 22px;
+  }
+
+  .top-half-content a {
+    font-size: 14px;
+    margin-bottom: 0;
   }
 
   .browser-image {
@@ -154,7 +163,7 @@ body {
   }
 
   .top-half-content h3 {
-    margin-bottom: 16px;
+    margin-bottom: 0;
     margin-left: 8px;
     margin-right: 8px;
   }