Some design updates.

vytaux · Dec 13, 2024 · fc6ace2 · fc6ace2
1 parent e39fb2c
commit fc6ace2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/App.css b/src/App.css
@@ -146,4 +146,38 @@ table {
 .edit-property-content, .edit-offer-content,
 .owner-dashboard-content, .admin-dashboard-content, .customer-dashboard-content {
     padding: 16px;
+}
+
+.search-form input {
+    width: 140px;
+    /*flex-direction: column;*/
+}
+
+@media (max-width: 800px) {
+    .search-form input {
+        width: 100px;
+        /*flex-direction: column;*/
+    }
+}
+
+@media (max-width: 600px) {
+    .search-form {
+        flex-direction: column;
+        padding: 0 40px;
+    }
+
+    .search-form input {
+        width: 100%;
+    }
+}
+
+
+@media (max-width: 800px) {
+    nav {
+        flex-direction: column;
+    }
+
+    .dashboard-links a {
+        display: block;
+    }
 }
diff --git a/src/containers/Header/Header.css b/src/containers/Header/Header.css
@@ -37,6 +37,12 @@
         .auth-links {
             margin-left: auto;
 
+            @media (max-width: 800px) {
+                margin-left: inherit;
+                margin-top: 16px;
+                margin-bottom: 18px;
+            }
+
             a {
                 background-color: #dc3545;
                 border-radius: 5px;

diff --git a/src/containers/Homepage/Homepage.js b/src/containers/Homepage/Homepage.js
@@ -43,7 +43,7 @@ const Homepage = () => {
         <div className='homepage'>
             <h1>Trending Properties</h1>
 
-            <form
+            <form className='search-form'
                 onSubmit={search}
                 style={{
                     display: "flex",
@@ -65,7 +65,6 @@ const Homepage = () => {
                         borderRadius: "4px",
                         border: "1px solid #ccc",
                         fontSize: "14px",
-                        width: "200px",
                     }}
                 />
                 <input
@@ -77,7 +76,6 @@ const Homepage = () => {
                         borderRadius: "4px",
                         border: "1px solid #ccc",
                         fontSize: "14px",
-                        width: "200px",
                     }}
                 />
                 <input
@@ -89,7 +87,6 @@ const Homepage = () => {
                         borderRadius: "4px",
                         border: "1px solid #ccc",
                         fontSize: "14px",
-                        width: "100px",
                     }}
                 />
                 <input
@@ -101,7 +98,6 @@ const Homepage = () => {
                         borderRadius: "4px",
                         border: "1px solid #ccc",
                         fontSize: "14px",
-                        width: "100px",
                     }}
                 />
                 <button