home page: responsive to mobile and tablet

surya-tamang · Jun 11, 2024 · e848db3 · e848db3
1 parent d9da1ef
commit e848db3
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/src/index.css b/src/index.css
@@ -50,8 +50,25 @@
 }
 
 @media screen and (max-width:768px) {
-    .home_section {
+    .home_page {
         background: url('/src/assets/home/background-home-tablet.jpg');
+        flex-direction: column;
+        padding: 15px 20px;
+        align-items: start;
+    }
+
+    .home_page article {
+        width: 80%;
+        margin-top: 15rem;
+        margin-bottom: 5rem;
+    }
+
+    .home_page article h1 {
+        font-size: 6rem;
+    }
+
+    .home_page article p {
+        font-size: 12px;
     }
 
     .crew_page {
@@ -83,12 +100,25 @@
 }
 
 
-@media screen and (max-width:468px) {
-    .home_section {
+@media screen and (max-width:374px) {
+    .home_page {
         background: url('/src/assets/home/background-home-mobile.jpg');
         width: 100%;
         min-height: 100vh;
         background-repeat: no-repeat;
+        padding: 0 15px;
+    }
+
+    .home_page article {
+        width: 90%;
+        margin-top: 9rem;
+    }
+
+    .home_page button {
+        height: auto;
+        width: auto;
+        padding: 10px 15px;
+        margin-bottom: 10px;
     }
 
     .crew_page {