Merge pull request #283 from gnjayasekara/main #279

Improve responsiveness of Contact Us page
Gyanthakur · Oct 14, 2024 · aebaf25 · aebaf25
2 parents a6e8fb7 + 4c40588
commit aebaf25
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 6 deletions.
diff --git a/about-us.html b/about-us.html
@@ -66,7 +66,7 @@
 
               <a href="contact-us.html">
                 <button class="add" onclick='window.open("contact-us.html","_self")'>
-                  Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                  Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                 </button>
               </a>
               <button class="dark-btn about-dark"><img id="icon" src="dark.png" alt="Dark" style="right: 0%;top: 0%;"></img></button>

diff --git a/contact-us.html b/contact-us.html
@@ -48,7 +48,7 @@
                 </a>
                 <a href="contact-us.html">
                     <button class="add" onclick='window.open("contact-us.html","_self")'>
-                      Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                      Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                     </button>
                   </a>
                 <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>

diff --git a/index.html b/index.html
@@ -49,7 +49,7 @@
 
                     <a href="contact-us.html">
                         <button class="add" onclick='window.open("contact-us.html","_self")'>
-                          Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                          Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                         </button>
                     </a>
                     <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>

diff --git a/project.html b/project.html
@@ -46,7 +46,7 @@
 
                         <a href="contact-us.html">
                             <button class="add" onclick='window.open("contact-us.html","_self")'>
-                            Content Us &nbsp; <i class="fa-solid fa-address-book"></i>
+                            Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
                             </button>
                         </a>
                         <button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>

diff --git a/style.css b/style.css
@@ -777,7 +777,7 @@ footer {
 
 /* Contact container styling */
 .contact-container {
-  max-width: 800px;
+  max-width: 50rem;
   margin: 50px auto;
   padding: 50px;
   background-color: #f9f9f9;
@@ -786,6 +786,9 @@ footer {
   color: #333;
   font-family: "Poppins", sans-serif;
 } 
+.contact-form {
+  width: 100%;
+}
 
 /* Input group styling */
 .contact-form .input-group {
@@ -795,7 +798,8 @@ footer {
 /* Input and textarea styling */
 .contact-form input,
 .contact-form textarea {
-  width: 100%;
+  width: 30rem;
+  max-width: 30rem;
   padding: 15px;
   background-color: #fff;
   border: 1px solid #ddd;
@@ -854,3 +858,43 @@ footer {
   font-weight: bold;
   text-decoration: none;
 }
+
+@media (max-width: 768px) {
+  /* Contact container styling */
+.contact-container {
+  max-width: 90%;
+  margin: 5%;
+  padding: 5%;
+} 
+
+
+/* Button styling */
+.contact-form button {
+  width: 90%;
+}
+}
+
+@media (max-width: 620px) {
+
+  .contact-container {
+    max-width: 100%;
+    margin: 5%;
+    padding: 5%;
+  }
+
+  .contact-form .input-group {
+    width: 90%;
+  }
+
+  .contact-form input,
+  .contact-form textarea {
+    margin: 5% 20% 0 5%;
+    max-width: 100%;
+  }
+  .contact-form button {
+    width: 100%;
+    margin: 5% 20% 0 5%;
+  }
+
+}
+