From df0119d1033eae7d801d307562e81a5c0a80b3da Mon Sep 17 00:00:00 2001
From: jefin <techy.jefinjoji@gmail.com>
Date: Wed, 3 Dec 2025 19:07:51 +0530
Subject: [PATCH 1/2] feat: add responsiveness to my rooms page

---
 src/components/RoomsSlider/RoomCard.module.css | 14 ++++++++++----
 src/components/RoomsSlider/RoomsSlider.css     | 14 ++++++++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/RoomsSlider/RoomCard.module.css b/src/components/RoomsSlider/RoomCard.module.css
index 3ccf317..733e3dd 100644
--- a/src/components/RoomsSlider/RoomCard.module.css
+++ b/src/components/RoomsSlider/RoomCard.module.css
@@ -121,20 +121,26 @@
 /* --- RESPONSIVE --- */
 @media (max-width: 768px) {
   .card {
-    max-width: 320px;
+    margin: 0 auto;
+    max-width: 280px;
   }
   .hero {
-    height: 160px;
+    height: 140px;
+  }
+  .card {
+    transform: scale(0.8);   /* 90% of original size */
+    transform-origin: center; /* or top left, top center, etc. */
   }
 }
 
 @media (max-width: 480px) {
   .card {
-    max-width: 100%;
+    max-width: 260px;
+    margin: 0 auto;
     border-radius: 14px;
   }
   .hero {
-    height: 150px;
+    height: 130px;
   }
   .info {
     padding: 16px;
diff --git a/src/components/RoomsSlider/RoomsSlider.css b/src/components/RoomsSlider/RoomsSlider.css
index fce1cd7..46b6658 100644
--- a/src/components/RoomsSlider/RoomsSlider.css
+++ b/src/components/RoomsSlider/RoomsSlider.css
@@ -194,16 +194,17 @@
 /* Mobile styles (max-width: 768px) */
 @media (max-width: 768px) {
   .slider-container {
-    padding: 12px 16px;
+    padding-top: 20px;      /* Pull heading up */
+    padding-bottom: 20px; 
   }
 
   .slider-title {
-    font-size: 26px;
-    padding: 0 8px;
-    margin-bottom: 6px;
+    font-size: 24px;
+    margin-top: 6px;
   }
 
   .slider-wrapper {
+    justify-content: center;
     gap: 12px;
   }
 
@@ -213,11 +214,12 @@
 
   .slider-swiper {
     padding: 0 10px;
+    display: flex;
+    justify-content: center;
   }
 
   .pagination {
     margin-bottom: 12px;
-    margin-top: 6px;
   }
 
   .room-card {
@@ -244,7 +246,7 @@
 /* Small mobile styles (max-width: 480px) */
 @media (max-width: 480px) {
   .slider-container {
-    padding: 10px 12px;
+    padding: 20px 12px;
   }
 
   .slider-title {

From aae8004e80ff29e0c0d829941067bd065c737812 Mon Sep 17 00:00:00 2001
From: jefin <techy.jefinjoji@gmail.com>
Date: Wed, 3 Dec 2025 20:09:13 +0530
Subject: [PATCH 2/2] fix: fix slider margin

---
 src/components/RoomsSlider/RoomsSlider.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/RoomsSlider/RoomsSlider.css b/src/components/RoomsSlider/RoomsSlider.css
index 46b6658..9b31348 100644
--- a/src/components/RoomsSlider/RoomsSlider.css
+++ b/src/components/RoomsSlider/RoomsSlider.css
@@ -220,6 +220,7 @@
 
   .pagination {
     margin-bottom: 12px;
+    margin-top: 6px;
   }
 
   .room-card {