<fix the issue #1452>

apu52 · Oct 20, 2024 · 5f79798 · 5f79798
1 parent 11d6e56
commit 5f79798
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1923,7 +1923,7 @@ <h2 class="section__title" align-items="center" data-aos="slide-right">Contact U
             <div>
               <h1 class="section__title" style="height: 90px;">Contact Us</h1>
               <p>Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!</p>
-              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif">
+              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" width="100%">
             </div>
           </div>
           <div class="contact-form" data-aos="fade-in">
@@ -1933,20 +1933,11 @@ <h1>Contact Us</h1>
                 <i class="icon1 fa-solid fa-user"></i>
                 <input type="text" id="Name" placeholder="Name" style="padding-left: 6%;">
               </div>
-              <div style="position: relative;">
-                <i class="icon2 fa-solid fa-envelope"></i>
-                <input type="email" id="email" placeholder="Email" class="contact-us-email-fix" style="padding-left:6%; width: 50% !important;
-                padding-left: 6% !important;
-                padding-bottom: 10px !important;
-                margin: 20px !important;
-                margin-left: 30px !important;
-                outline: none !important;
-                border: none !important;
-                font-size: 15px !important;
-                background: none !important;
-                border-bottom: 1px solid var(--text-dark) !important;
-                color: var(--text-dark) !important;
-                font-family: 'Oxygen', sans-serif !important; border-radius: 20px;" required>
+
+              <div style="position: relative;"> 
+                <i class="icon2 fa-solid fa-envelope"></i> 
+                <input type="email" id="Email" placeholder="Email" class="contact-us-email-fix" style="padding-left: 6%;" 
+                required> 
               </div>
               <div style="position: relative;">
                 <i class="icon3 fa-solid fa-message"></i>

diff --git a/styles.css b/styles.css
@@ -1681,6 +1681,23 @@ body.dark-theme .items {
 .contact-form #Name {
   margin-top: 100px;
 }
+.contact-form #Email {
+  margin-top: 100px;
+}
+.contact-form #Email {
+                width: 50% !important;
+                padding-left: 10px;
+                padding-bottom: 10px;
+                margin: 20px;
+                margin-left: 30px;
+                outline: none;
+                border: none;
+                font-size: 15px;
+                background: none;
+                border-bottom: 2px solid var(--extra-light) !important;
+                color: var(--extra-light);
+                font-family: "Oxygen", sans-serif;
+}
 
 .contact-form h4 {
   color: var(--extra-light);
@@ -1779,6 +1796,9 @@ body.dark-theme .items {
   .contact-form input {
     width: 75%;
   }
+  .contact-form #Email {
+    width: 75% !important;
+  }
 
   .contact-form textarea {
     width: 75%;
@@ -1809,7 +1829,7 @@ body.dark-theme .items {
 
   .contact img {
     height: 300px;
-    width: 300px;
+    width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -1828,6 +1848,8 @@ body.dark-theme .items {
     left: 14.8%;
   }
 }
+.contact-form #Email {
+  width: 50% !important;}
 
 .contact-form input,
 .contact-form textarea {
@@ -1852,6 +1874,9 @@ body.dark-theme .items {
 }
 
 @media (max-width: 920px) {
+  .contact-form #Email {
+    width: 75% !important;
+  }
   .contact-form input,
   .contact-form textarea {
     width: 75%;
@@ -1869,6 +1894,9 @@ body.dark-theme .items {
 }
 
 @media (max-width: 700px) {
+  .contact-form #Email {
+    width: 75% ;
+  }
   .contact-form input,
   .contact-form textarea {
     width: 75%;
@@ -1884,7 +1912,53 @@ body.dark-theme .items {
     left: 14.8%;
   }
 }
-
+@media (max-width: 440px) {
+  .contact-form #Email {
+    width: 75% ;}
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+  .icon1 {
+    left: 11%;
+  }
+  .icon2 {
+    left: 11%;
+  }
+  .icon3 {
+    left: 11%;
+  }
+}
+@media (max-width: 342px) {
+  .contact-form #btn-style{
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (max-width: 325px) {
+  .contact-form #btn-style{
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .contact-form #Email {
+    width: 75% !important;
+  }
+  .contact-form input,
+  .contact-form textarea {
+    width: 75%;
+    color: var(--text-dark);
+  }
+  .icon1 {
+    left: 11%;
+  }
+  .icon2 {
+    left: 11%;
+  }
+  .icon3 {
+    left: 11%;
+  }
+}
 /* Custom scrollbar for WebKit browsers */
 /* body::-webkit-scrollbar {
   width: 8px;