Merge pull request #50 from Shruti025/stays-nearby

Search Nearby responsiveness
aman34503 · Feb 22, 2022 · 7207b61 · 7207b61
2 parents 04aa712 + 2d6af06
commit 7207b61
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 26 deletions.
diff --git a/src/SearchResult.css b/src/SearchResult.css
@@ -1,21 +1,29 @@
 .searchResult {
-    display: flex;
-    position: relative;
+    display: grid;
+    grid-template-columns: 23% 77%;
+    width: auto;
     margin: 20px;
     padding: 20px;
     border-bottom: 1px solid lightgray;
     cursor: pointer;
-  }
+    height: 25vh;
+    max-height: 200px;
+}
 
-.searchResult:hover {
-    opacity: 0.8;
+.hotel-image{
+    object-fit: contain;
+    height: 25vh;
+    max-height: 200px;
 }
 
-.searchResult > img {
-    height: 200px;
-    width: 350px;
+.hotel-image img{
     border-radius: 10px;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.searchResult:hover {
+    opacity: 0.8;
 }
 
 .searchResult__info {
@@ -26,26 +34,31 @@
 }
 
 .searchResult__heart {
-    position: absolute;
-    top: 20px;
-    right: 40px;
+    margin-right: 0px;
 }
 
 .searchResult__infoTop {
-    width: 40vw;
+    width: auto;
 }
 
 .searchResult__infoTop > h3 {
     font-weight: 300;
     margin-top: 10px;
+    margin-bottom: 0px;
 }
 
 .searchResult__infoTop > p {
-    margin-top: 10px;
+    margin-top: 8px;
     font-size: 13px;
     color: gray;
-  }
-
+}
+
+.locationDiv{
+    display: flex;
+    justify-content: space-between;
+    padding-right: 5px;
+}
+
 .searchResult__infoBottom {
     display: flex;
     justify-content: space-between;
@@ -62,12 +75,68 @@
     align-items: center;
 }
 
-.searchResults__price > p {
+.searchResults__price{
+    margin-top: 10px;
+}
+
+.searchResults__price h2{
+    font-size: 20px;
+}
+.searchResults__price p{
+    font-size: 16px;
     text-align: right;
-  }
+}
 
-.searchResults__price {
-    position: absolute;
-    bottom: 20px;
-    right: 30px;
-}
+@media screen and (max-width: 1300px){
+    .searchResult {
+        grid-template-columns: 27% 70%;
+    }
+}
+@media screen and (max-width: 1000px){
+    .searchResult {
+        grid-template-columns: 35% 65%;
+    }
+}
+@media screen and (max-width: 800px){
+    .searchResults__price h2{
+        font-size: 18px;
+    }
+    .searchResults__price p{
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 700px){
+    .searchResult {
+        grid-template-columns: 40% 60%;
+    }
+
+}
+
+@media screen and (max-width: 450px){
+    .searchResult {
+        height: 28vh;
+        grid-template-columns: 45% 60%;
+    }
+    .searchResults__price h2{
+        font-size: 15px;
+    }
+    .searchResults__price p{
+        font-size: 10px;
+    }
+    .hotel-image{
+        height: 28vh
+    }
+}
+
+@media screen and (max-height: 700px){
+    .searchResult {
+        height: 30vh;
+        max-height: 350px;
+    }
+
+    .hotel-image{
+        height: 30vh;
+        max-height: 350px;
+    }
+}
diff --git a/src/SearchResult.js b/src/SearchResult.js
@@ -14,12 +14,16 @@ function SearchResult({
 }) {
     return (
         <div className='searchResult'>
-            <img src={img} alt="" />
-            <FavoriteBorderIcon className="searchResult__heart" />
+            <div className='hotel-image'>
+                <img src={img} alt="" />
+            </div>
 
             <div className='searchResult__info'>
                 <div className="searchResult__infoTop">
-                    <p>{location}</p>
+                    <p className='locationDiv'>
+                        {location}
+                        <FavoriteBorderIcon className="searchResult__heart" />
+                    </p>
                     <h3>{title}</h3>
                     <p>____</p>
                     <p>{description}</p>