Merge pull request #896 from meetarora10/find-branch

Made the Find A Doctor/Doctor Experience page responsive .
Anishkagupta04 · Jul 31, 2024 · 2f01207 · 2f01207
2 parents db88834 + b94f2f1
commit 2f01207
Show file tree

Hide file tree

Showing 6 changed files with 795 additions and 272 deletions.
diff --git a/Html-Files/Css-Files/Experiencestyle.css b/Html-Files/Css-Files/Experiencestyle.css
@@ -130,6 +130,12 @@ body {
     align-items: center;
     height: 60px;
     margin: auto;
+    position: fixed;
+    width: 100vw;
+    height: 4.8rem;
+  }
+  .h{
+    margin-top: 90px;
   }
   *,*::after,*::before{
     /*padding: 0;
@@ -147,6 +153,7 @@ margin-bottom: 20px;
 .filter-sort {
 display: flex;
 align-items: center;
+flex-wrap: wrap;
 }
 
 .filter-sort label {
@@ -356,6 +363,7 @@ align-items: center;
   /*? socials */
   .social-wrapper {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     margin: 0 auto;
   }
@@ -390,7 +398,51 @@ align-items: center;
   }
 
 
-
+  @media (max-width:768px){
+    .footer-bottom-wrapper{
+      position: relative;
+      right: 200px;
+      width: 68%;
+    }
+    #doctor-list li{
+      width: 56%;
+    }
+    .min,#fee-filter,#fee-value{
+      position: relative;
+      right: 416px;
+      top: 39px;
+    }
+    .img img {
+      position: relative;
+      left: 300px;
+      bottom: 12px;
+    }
+    #sort-btn{
+      position: relative;
+      right: 494px;
+      top: 75px;
+    }
+    .filter-sort{
+      height: 117px;
+    }
+  }
+  @media (max-width:576px) {
+    .footer-bottom-wrapper{
+      position: relative;
+      right: 140px;
+    }
+  }
+  @media screen and (max-width:620px) {
+    .min,#fee-filter,#fee-value{
+      right: 420px;
+      top: 75px;
+    }
+    #sort-btn{
+      right: 112px;
+      top: 42px;
+    }
+
+  }
   @media (min-width: 600px) {
     .other-columns {
         display: grid;
@@ -407,7 +459,7 @@ align-items: center;
         margin-left: 1.5rem;
     }
   }
-  
+
   @media (max-width: 800px) {
     .footer-top {
         display: flex;
@@ -421,6 +473,8 @@ align-items: center;
     font-size: 1.5rem
     }
     #ss{
+        display: flex;
+        flex-wrap: wrap;
         font-size: 1.3rem;
     }
   .social-links #insta:hover {
@@ -526,6 +580,8 @@ align-items: center;
 #back-to-top:hover {
   transform: scale(1.1);
 }
+<<<<<<< HEAD
+=======
 #subscribeBanner {
   display: none;
   position: fixed;
@@ -655,4 +711,5 @@ align-items: center;
     #doctor-list li .content:hover {
       color: aliceblue;
       font-size: 30px;
-    }
+    }
+>>>>>>> c95240aabf081bcd1831deb17d34a642e1974c6b