Fixed hero text on mobile

randombits-dev · Dec 13, 2023 · 1af2bc6 · 1af2bc6
1 parent 77f46b5
commit 1af2bc6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -88,9 +88,9 @@ const twitterSVG = await fetch('https://storage.googleapis.com/randombits/images
         font-size: 5rem;
         margin-bottom: 0;
         font-family: 'Poiret One', cursive;
-        text-align: right;
         letter-spacing: 6px;
         font-weight: bold;
+        text-align: right;
     }
 
     .hero-text-2 {
@@ -100,6 +100,30 @@ const twitterSVG = await fetch('https://storage.googleapis.com/randombits/images
         font-size: 3rem;
     }
 
+    @media screen and (max-width: 1000px) {
+        .hero-text-1 {
+            font-size: 3rem;
+            text-align: center;
+        }
+
+        .hero-text-2 {
+            font-size: 2rem;
+            text-align: center;
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        .hero-text-1 {
+            font-size: 3rem;
+            text-align: center;
+        }
+
+        .hero-text-2 {
+            font-size: 1.5rem;
+            text-align: center;
+        }
+    }
+
     .choose {
         //font-family: 'Edu SA Beginner', sans-serif;
         font-size: 1.5rem;

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -182,7 +182,7 @@ button {
 
 .title-total, .title-percent {
     font-size: 1.5rem;
-    padding: 0.5rem 2rem;
+    padding: 0.5rem 1rem;
     flex: 1 1 auto;
     text-align: right;
 }