🚸 Mobile usability fixes (#5351)

* 💄 Fix mobile section bleeding for flex container * 💄 Fix overflow caused by code snippets * 🐛 Hide overflow of slider * 🐛 Fix mobile view * 🐛 Fix width of teasergrid on mobile
ampproject · Feb 15, 2021 · afc3508 · afc3508
1 parent 2f4b5d9
commit afc3508
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 7 deletions.
diff --git a/frontend/scss/components/molecules/code-snippet.scss b/frontend/scss/components/molecules/code-snippet.scss
@@ -48,7 +48,7 @@ Styles taken and combined from: https://raw.githubusercontent.com/richleland/pyg
 
   pre, code {
     @include txt-mono;
-    white-space: pre-wrap;
+    white-space: pre;
     font-size: 0.9rem;
 	  padding: unset;
 	  word-break: initial;

diff --git a/frontend/scss/components/molecules/tip.scss b/frontend/scss/components/molecules/tip.scss
@@ -47,6 +47,8 @@ The tip molecule shows text alongside a contextual icon
 
   &-content {
     @include txt-2;
+    min-width: 0;
+
     h4 {
       @include txt-1;
       margin: 0 0 0.75em;

diff --git a/frontend/scss/components/organisms/teaser-grid.scss b/frontend/scss/components/organisms/teaser-grid.scss
@@ -50,7 +50,7 @@
     display: flex;
     flex-wrap: nowrap;
     padding: 20px 0;
-    margin: 0 -20px;
+    margin: 0 -15px;
 
     @media (min-width: 575px) {
       overflow: visible;

diff --git a/frontend/scss/components/templates/_default.scss b/frontend/scss/components/templates/_default.scss
@@ -15,6 +15,10 @@
 
   @media (max-width: 767px) {
     padding: 0 15px;
+
+    & > div, section {
+      min-width: 0;
+    }
   }
 
   @media (min-width: 768px) {
@@ -44,6 +48,12 @@
   margin-right: auto;
   max-width: 1920px;
 
+  @media (max-width: 767px) {
+    & > div, section {
+      min-width: 0;
+    }
+  }
+
   @media (min-width: 768px) {
     display: grid;
     grid-gap: 30px;

diff --git a/frontend/scss/components/templates/use-cases.scss b/frontend/scss/components/templates/use-cases.scss
@@ -51,6 +51,7 @@
   .#{organism('fragment-slider')} {
     grid-column: 1 / -1;
     margin-top: -76%;
+    overflow: hidden;
     @media (min-width: 768px) {
       margin-top: -56%;
     }

diff --git a/frontend/scss/components/templates/what-is-amp.scss b/frontend/scss/components/templates/what-is-amp.scss
@@ -36,10 +36,6 @@
 
   .#{utility('container-fluid')} {
     @include container-fluid;
-
-    > div, section {
-      min-width: 0;
-    }
   }
 
 

diff --git a/playground/src/fly-in/fly-in.scss b/playground/src/fly-in/fly-in.scss
@@ -4,7 +4,7 @@
 .fly-in {
   $headerHeight: 64px;
 
-  position: absolute;
+  position: fixed;
   z-index: 10000;
   top: 0;
   display: flex;
@@ -18,6 +18,7 @@
   transition: transform .3s ease, box-shadow .2s ease-in;
 
   @media (min-width: 768px) {
+    position: absolute;
     top: #{$headerHeight};
     width: 42%;
     max-width: 480px;