Adjust size and position of phone number and email in the contact mod…

…al (#70)
Spencer14420 · Nov 23, 2024 · 082c910 · 082c910
1 parent 2c0520f
commit 082c910
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/dist/css/style.css b/dist/css/style.css
@@ -181,6 +181,11 @@ footer {
   border-radius: 0.2rem;
   padding: 0.375rem 0.75rem;
   gap: 6px;
+
+  img {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }
 
 #openingpara {
@@ -204,6 +209,9 @@ footer {
 
 div:has(> .contact-info) {
   display: none;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 h2 {
@@ -331,30 +339,36 @@ h2 {
     display: flex;
   }
 }
-@media (max-width: 575px), (max-height: 600px) {
+
+@media (max-width: 500px) {
   div:has(> .contact-info) {
-    align-items: center;
-    margin-block-end: -17px !important;
+    gap: 0.5rem;
   }
   .contact-info {
-    inline-size: max-content;
-    font-size: 1.1rem;
-    padding: 3px 6px;
-    border: 1px solid black;
-  }
-  .contact-info img {
-    block-size: 20px;
-    inline-size: 20px;
+    font-size: 1rem;
+    padding: 0.3rem 0.6rem;
   }
 }
 
-@media (max-width: 430px) {
+@media (max-width: 400px) {
   div:has(> .contact-info) {
-    flex-direction: column !important;
+    gap: 0.2rem;
   }
-  .contact-info:first-of-type {
-    margin-block-end: 2px;
-    flex-direction: row-reverse;
+  .contact-info {
+    font-size: 1rem;
+    padding: 0.2rem 0.4rem;
+    gap: 3px;
+
+    img {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+  }
+}
+
+@media (max-width: 350px) {
+  .contact-info img {
+    display: none;
   }
 }
 

diff --git a/index.php b/index.php
@@ -244,11 +244,11 @@
                 </div>
                 <div class="modal-body">
                     <div>
-                        <a href="tel:613-831-7639" class="d-flex align-items-center text-dark mx-1 contact-info">
+                        <a href="tel:613-831-7639" class="d-flex align-items-center text-dark contact-info">
                             <span>613-831-7639</span>
                             <img alt="Phone" src="https://ik.imagekit.io/capanda/tr:w-26/Icons/phone-sm.png">
                         </a>
-                        <a href="mailto:[email protected]" class="d-flex align-items-center text-dark mx-1 contact-info">
+                        <a href="mailto:[email protected]" class="d-flex align-items-center text-dark contact-info">
                             <img alt="EMail" src="https://ik.imagekit.io/capanda/tr:w-26/Icons/email-sm.png">
                             <span>[email protected]</span>
                         </a>