From 21d01eaf9e3789ee1dd5d502b3eed887ebe844d9 Mon Sep 17 00:00:00 2001
From: Vaibhav-Yerkar <vaibhavyerkar2017@gmail.com>
Date: Thu, 10 Oct 2024 13:25:47 +0530
Subject: [PATCH] made UI responsive for review section and reccomendation
 section

---
 package-lock.json |  6 ++++++
 style.css         | 28 ++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..31cdcb43
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "BuddyTrail",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/style.css b/style.css
index 1cc1a4d3..77f9fbec 100644
--- a/style.css
+++ b/style.css
@@ -1016,7 +1016,9 @@ justify-content: center;
   .reviews-list {
     grid-template-columns: 1fr;
   }
-  
+  .form-button button{
+    width:100%;
+  }
   .reviews-title {
     font-size: 2em;
   }
@@ -1025,13 +1027,27 @@ justify-content: center;
     max-width: 400px;
     margin: 0 auto;
   }
+  .review-form{
+    width:60vw;
+  }
+  .form{
+    width: 50vw;
+  }
 }
 
 @media (max-width: 480px) {
   .reviews-container {
     padding: 20px 10px;
   }
-  
+  .review-form{
+    width:80vw;
+  }
+  .form{
+    width:70vw;
+  }
+  .form-button button{
+    width:100%
+  }
   .review-header {
     flex-direction: column;
     text-align: center;
@@ -1429,6 +1445,14 @@ justify-content: center;
 .recommendation-item button:hover {
   background-color: #003d80; /* Darker blue on hover */
 }
+@media (max-width: 768px) {
+  .recommendation-list{
+    flex-direction: column;
+  }
+  .recommendation-item{
+    max-width: 100%;
+  }
+}
 /* Positioning and Styling for Google Translate Button */
 .translate-container {
   position: fixed;