mobile styles - med res

ayushsaranGithuB · Aug 14, 2024 · e22835f · e22835f
1 parent 5642a7d
commit e22835f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/public/global.css b/public/global.css
@@ -146,7 +146,12 @@ header a {
     color: var(--white-primary);
 }
 
-ul.mobile-menu {
+header svg#icon-menu {
+    width: 30px;
+    cursor: pointer;
+}
+
+header .mobile-menu {
     display: none;
 }
 
@@ -327,7 +332,7 @@ footer .creative-commons {
 }
 
 /* MOBILE */
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 800px) {
 
     footer .inner-content {
         flex-direction: column;

diff --git a/public/home.css b/public/home.css
@@ -463,6 +463,25 @@ div.tutorials-medium {
     label.mobile-menu {
         display: none;
     }
+
+    /* page header */
+
+    .page-header {
+        grid-template-columns: 1fr;
+    }
+
+    .page-header h2 {
+        padding: 40px 20px;
+        font-size: 26px;
+        line-height: 1.4;
+        max-width: 80%;
+        word-break: keep-all;
+
+    }
+
+    .page-header .content p {
+        margin-bottom: 60px;
+    }
 }
 
 /* MOBILE */
@@ -477,11 +496,6 @@ div.tutorials-medium {
         display: none;
     }
 
-    header svg#icon-menu {
-        width: 30px;
-        cursor: pointer;
-    }
-
     #burger-1,
     #burger-2,
     #burger-3 {
@@ -551,22 +565,7 @@ div.tutorials-medium {
 
     /* page header */
 
-    .page-header {
-        grid-template-columns: 1fr;
-    }
-
-    .page-header h2 {
-        padding: 40px 20px;
-        font-size: 26px;
-        line-height: 1.4;
-        max-width: 80%;
-        word-break: keep-all;
-
-    }
-
-    .page-header .content p {
-        margin-bottom: 60px;
-    }
+
 
     .secondary {
         padding: 40px 0;
@@ -599,6 +598,15 @@ div.tutorials-medium {
         width: 100%;
     }
 
+    .tutorials-large .tutorial {
+        width: calc(100% - 50px);
+    }
+
+    .tutorials-large {
+        flex-direction: column;
+        row-gap: 30px;
+    }
+
     .roadmap .tutorial {
         margin-bottom: 20px;
         flex-direction: column;