Fix the header items alignment and add the responsiveness (#1475)

Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
reactplay · Feb 28, 2024 · ca54111 · ca54111
1 parent 194cb51
commit ca54111
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
@@ -111,12 +111,12 @@ const Header = () => {
         }`}
         data-testid="app-header"
       >
-        <span>
+        <span className="pl-0 md:pl-[50px]">
           <Link className="app-logo" data-testid="app-logo" to="/">
             <span className="sr-only">React Play</span>
           </Link>
         </span>
-        <div className="app-header-search">
+        <div className="app-header-search pl-0 xl:pl-[130px]">
           {showHideBits.showSearch && <SearchBox reset={reset} />}
         </div>
 

diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -101,7 +101,7 @@
   display: none;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1217px) {
   .navbar-toggler {
     display: none;
   }
@@ -175,7 +175,7 @@
   margin-right: 1rem;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1217px) {
   .navbar-collapse.show {
     display: block;
     position: fixed;
@@ -371,6 +371,15 @@
   } */
 }
 
+@media screen and (max-width: 1217px) {
+  .header-links > li > .app-header-btn.app-header-btn--secondary {
+    color: var(--color-neutral-80);
+  }
+  .menu-events {
+    margin: 0.4rem 0 0rem 0;
+  }
+}
+
 /* searchs Modal */
 .modal-share {
   position: fixed;

diff --git a/src/common/search/search.css b/src/common/search/search.css
@@ -68,10 +68,14 @@
   color: var(--color-neutral-10);
 }
 
-@media screen and (max-width: 576px) {
+@media screen and (max-width: 1217px) {
   .filter {
-    padding: 0.5rem 0;
+    display: grid;
+    justify-content: start;
   }
+}
+
+@media screen and (max-width: 576px) {
   .filter .search-input-icon {
     left: 0.6rem;
     width: 20px;
@@ -135,6 +139,19 @@
   }
 }
 
+@media screen and (max-width:494px) {
+  .filter {
+    display: grid;
+    justify-content: center;
+  }
+}
+
+@media screen and (max-width: 408px) {
+  .filter .filter-area {
+    width: 198px;
+  }
+}
+
 /* Filters Modal */
 .modal-filter {
   position: fixed;