updating the font resizing for mobile view

diff --git a/css/app.css b/css/app.css
index 43e1ef5..a626493 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -4855,10 +4855,10 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 0; }
 
 h1 {
-  font-size: 2.6875rem; }
+  font-size: 2.5625rem; }
 
 h2 {
-  font-size: 2.6875rem; }
+  font-size: 2.4375rem; }
 
 h3 {
   font-size: 1.6875rem; }
@@ -6560,10 +6560,16 @@ main.page-inside #content-wrapper #main-content h1 {
   font-weight: bold;
   letter-spacing: 0.05em;
   color: #0568b3; }
+  @media only screen and (max-width: 40em) {
+    main.page-inside #content-wrapper #main-content h1 {
+      font-size: 2.4375rem; } }
 main.page-inside #content-wrapper #main-content h2 {
   font-size: 1.5rem;
   letter-spacing: 0.1em;
   color: #f5822a; }
+  @media only screen and (max-width: 40em) {
+    main.page-inside #content-wrapper #main-content h2 {
+      font-size: 1.375rem; } }
 
 h2#block-title {
   text-transform: uppercase;

diff --git a/scss/_main.scss b/scss/_main.scss
index 9184745..8384d87 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -56,11 +56,17 @@ main.page-inside {
                 font-weight: bold;
                 letter-spacing: 0.05em;
                 color: $blue;
+                @media #{$small-only}{
+                    font-size: rem-calc(39);
+                }
             }
             h2 {
                 font-size: rem-calc(24);
                 letter-spacing: 0.1em;
                 color: $orange;
+                @media #{$small-only}{
+                    font-size: rem-calc(22);
+                }
             }
         }
     }

diff --git a/scss/_settings.scss b/scss/_settings.scss
index be9e8cb..13e8f8d 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -228,8 +228,8 @@ $h5-font-size: rem-calc(24);
 $h6-font-size: rem-calc(22);
 
 // We use these to control header size reduction on small screens
-$h1-font-reduction: rem-calc(9);
-$h2-font-reduction: rem-calc(5);
+$h1-font-reduction: rem-calc(11);
+$h2-font-reduction: rem-calc(9);
 $h3-font-reduction: rem-calc(5);
 $h4-font-reduction: rem-calc(2);
 $h5-font-reduction: rem-calc(2);