Mobile design fixes v6.19.24

Improved RWD features, multiple fixes for mobile
End-Us3r · Jun 20, 2024 · 1a8ddeb · 1a8ddeb
1 parent e303754
commit 1a8ddeb
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 100 deletions.
diff --git a/cpp-projects-style.css b/cpp-projects-style.css
@@ -163,7 +163,7 @@ h1 {
     justify-content: center;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 0;
     width: 100%;
     height: auto;
 }
@@ -219,7 +219,7 @@ footer p {
     text-align: center;
 }
 
-@media only screen and (min-width: 374px) and (max-width: 1024px) {
+@media only screen and (min-width: 320px) and (max-width: 480px) {
 
     html, body {
         font-size: 16px;
@@ -236,7 +236,7 @@ footer p {
     }
 
     h1 {
-        font-size: 5rem;
+        font-size: 2rem;
         color: yellow;
         margin: 0 auto;
         margin-top: 6rem;
@@ -255,6 +255,10 @@ footer p {
         box-shadow: 0 0 10px 3px yellow;
     }
 
+    .card-container > h2, .card-container > p {
+        font-size: 16px;
+    }
+
     .card-container {
         display: flex;
         background-color: linen;
@@ -283,7 +287,7 @@ footer p {
 
     .card a {
         width: auto;
-        margin: 1rem auto;
+        margin: 0 auto;
         padding: 0;
     }
 

diff --git a/data-projects-style.css b/data-projects-style.css
@@ -163,7 +163,7 @@ h1 {
     justify-content: center;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 0;
     width: 100%;
     height: auto;
 }
@@ -219,7 +219,7 @@ footer p {
     text-align: center;
 }
 
-@media only screen and (min-width: 374px) and (max-width: 1024px) {
+@media only screen and (min-width: 320px) and (max-width: 480px) {
 
     html, body {
         font-size: 16px;
@@ -236,7 +236,7 @@ footer p {
     }
 
     h1 {
-        font-size: 5rem;
+        font-size: 2rem;
         color: #fff;
         margin: 0 auto;
         margin-top: 6rem;
@@ -255,6 +255,10 @@ footer p {
         box-shadow: 0 0 15px 4px rgba(0, 0, 0, 1);
     }
 
+    .card-container > h2, .card-container > p {
+        font-size: 16px;
+    }
+
     .card-container {
         display: flex;
         background-color: linen;
@@ -283,7 +287,7 @@ footer p {
 
     .card a {
         width: auto;
-        margin: 1rem auto;
+        margin: 0 auto;
         padding: 0;
     }
 

diff --git a/front-end-projects-style.css b/front-end-projects-style.css
@@ -138,7 +138,7 @@ h1 {
     justify-content: center;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 0;
     width: 100%;
     height: auto;
 }
@@ -194,7 +194,7 @@ footer p {
     text-align: center;
 }
 
-@media only screen and (min-width: 374px) and (max-width: 1024px) {
+@media only screen and (min-width: 320px) and (max-width: 480px) {
 
     html, body {
         font-size: 16px;
@@ -216,8 +216,8 @@ footer p {
     }
 
     h1 {
-        font-size: 5rem;
-        color: green;
+        font-size: 2rem;
+        color: #ff8f00;
         margin: 0 auto;
         margin-top: 3rem;
         padding: 1rem;
@@ -251,6 +251,10 @@ footer p {
         opacity: 0.7;
         box-shadow: 0 0 15px 4px rgba(0, 0, 0, 1);
     }
+
+    .card-container > h2, .card-container > p {
+        font-size: 16px;
+    }
 
     .card {
         display: flex;
@@ -265,7 +269,7 @@ footer p {
 
     .card a {
         width: auto;
-        margin: 1rem auto;
+        margin: 0 auto;
         padding: 0;
     }
 

diff --git a/java-projects-style.css b/java-projects-style.css
@@ -138,7 +138,7 @@ h1 {
     justify-content: center;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 0;
     width: 100%;
     height: auto;
 }
@@ -194,7 +194,7 @@ footer p {
     text-align: center;
 }
 
-@media only screen and (min-width: 374px) and (max-width: 1024px) {
+@media only screen and (min-width: 320px) and (max-width: 480px) {
 
     html, body {
         font-size: 16px;
@@ -216,7 +216,7 @@ footer p {
     }
 
     h1 {
-        font-size: 5rem;
+        font-size: 2rem;
         color: #fff;
         margin: 0 auto;
         margin-top: 5rem;
@@ -235,6 +235,10 @@ footer p {
         box-shadow: 0 0 10px 4px deepskyblue;
     }
 
+    .card-container > h2, .card-container > p {
+        font-size: 16px;
+    }
+
     .card-container {
         display: flex;
         background-color: linen;
@@ -264,7 +268,7 @@ footer p {
 
     .card a {
         width: auto;
-        margin: 1rem auto;
+        margin: 0 auto;
         padding: 0;
     }