Responsive Design Contact Section

liamkaigates · Apr 5, 2024 · b098260 · b098260
1 parent 90c7b89
commit b098260
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/styles/mediaqueries.css b/styles/mediaqueries.css
@@ -38,6 +38,9 @@
     .project-popup-content {
         width: 70%;
     }
+    .contact-links .link i {
+        font-size: 3.5rem;
+    }
 }
 
 @media only screen and (max-width: 859px) {
@@ -69,6 +72,9 @@
     .project-popup-content {
         width: 80%;
     }
+    .contact-links .link i {
+        font-size: 3rem;
+    }
 }
 
 @media only screen and (max-width: 802px) {
@@ -183,12 +189,21 @@
     .skills-list i {
         font-size: 4rem;
     }
+    .project-title {
+        font-size: 2.5rem;
+    }
     .project-popup-content p {
         font-size: 1rem;
     }
     .project-popup-content .close i {
         font-size: 1.5rem;
     }
+    .contact-heading {
+        font-size: 2.5rem;
+    }
+    .contact-links .link p {
+        font-size: 0.8rem;
+    }
 }
 
 @media only screen and (max-width: 549px) {
@@ -207,12 +222,12 @@
     .skills-list p {
         font-size: 0.75rem;
     }
-    .project-title {
-        font-size: 2.5rem;
-    }
     .project-popup  {
         padding: 2rem;
     }
+    .contact-links .link i {
+        font-size: 2.5rem;
+    }
 }
 
 @media only screen and (max-width: 425px) {
@@ -235,6 +250,9 @@
     .skills-container h1 {
         font-size: 1.8rem;
     }
+    .project-title {
+        font-size: 1.8rem;
+    }
     .project-wrap {
         padding-bottom: 1.5rem;
     }
@@ -257,6 +275,9 @@
     .project-popup-content {
         padding: 1rem;
     }
+    .contact-heading {
+        font-size: 1.8rem;
+    }
 }
 
 @media only screen and (max-width: 384px) {

diff --git a/styles/style.css b/styles/style.css
@@ -539,6 +539,7 @@ footer {
 
 .contact-heading {
     text-align: center;
+    font-size: 3rem;
     padding-bottom: 4rem;
 }