Reduce title size on small screens

It didn't fit the screen properly on goals having long words.
2020-12-27 16:54:27 +01:00
parent 2509512d73
commit 9db0cfd009
1 changed files with 8 additions and 0 deletions
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -23,6 +23,10 @@
        content: "";
        flex: 1;
        min-width: 100px;
+
+        @include breakpoint(small only) {
+          min-width: 75px;
+        }
      }
    }

@@ -35,6 +39,10 @@
      line-height: 1.1;
      text-transform: uppercase;

+      @include breakpoint(small only) {
+        font-size: rem-calc(map-get(map-get(map-get($header-styles, small), h2), font-size));
+      }
+
      .goal-code {
        font-size: 2.2em;
        letter-spacing: -0.1em;