Improve font size on smart phone

naoki-tomita · May 11, 2023 · a472f14 · a472f14
1 parent ba17788
commit a472f14
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -3,6 +3,14 @@ import { styled } from "zstyl";
 
 const Heading = styled.h1`
   font-size: 3.25em;
+
+  @media (max-width: 560px) {
+    font-size: 2.5em;
+  }
+
+  @media (max-width: 450px) {
+    font-size: 1.7em;
+  }
 `;
 
 const Link = styled.a`

diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -13,6 +13,10 @@ const Heading1 = styled.h1`
   text-align: center;
   font-size: 4.2em;
   border: none;
+
+  @media (max-width: 560px) {
+    font-size: 2.5em;
+  }
 `;
 
 const Heading2 = styled.h2`