Merge pull request #367 from ReDI-School/fix/prodPageResponsive

Fix responsive design in MeetYourHostSection along with Calendar
ReDI-School · Dec 8, 2024 · 3bafb48 · 3bafb48
2 parents df9fec6 + 8bc66b0
commit 3bafb48
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/src/components/CalendarBlock/CalendarBlock.jsx b/src/components/CalendarBlock/CalendarBlock.jsx
@@ -53,7 +53,7 @@ const CalendarBlock = ({
         </div>
       </div>
       <div className={styles.calendarWrapper}>
-        {isCalendarBlock && (windowWidth > 1140 || windowWidth < 520) ? (
+        {isCalendarBlock && (windowWidth >= 1140) && (
         <Calendar 
             dayItemWidth="44px" 
             dayItemHeight="42px"
@@ -72,7 +72,8 @@ const CalendarBlock = ({
             isInitializedRef={isInitializedRef}
             isCalendarBlock={isCalendarBlock}
           />
-        ) : (
+        )} 
+        {isCalendarBlock && (windowWidth <= 1139 && windowWidth > 519) && (
           <Calendar 
             dayItemWidth="54px" 
             dayItemHeight="52px"
@@ -92,7 +93,27 @@ const CalendarBlock = ({
             isCalendarBlock={isCalendarBlock}
           />
         )}
-        </div>
+         {isCalendarBlock && (windowWidth < 520) && (
+          <Calendar 
+            dayItemWidth="40px" 
+            dayItemHeight="38px"
+            pickedDayWidth="38px"
+            pickedDayHeight="38px"  
+            monthContainerPadding="10px" 
+            textDecoration="line-through" 
+            buttonRightMargin="-46px"
+            buttonLeftMargin="-46px"
+            checkInDate={checkInDate}
+            checkOutDate={checkOutDate}
+            setCheckInDate={setCheckInDate}
+            setCheckOutDate={setCheckOutDate}
+            minStayNights={minStayNights}
+            alreadyBookedDates={alreadyBookedDates}
+            isInitializedRef={isInitializedRef}
+            isCalendarBlock={isCalendarBlock}
+          />
+        )}
+      </div>
       <div className={styles.buttonsContainer}>
         <button
           className={styles.shortcutsPopupButton}

diff --git a/src/components/MeetYourhostSection/MeetYourHostLeft/MeetYourHostLeft.module.css b/src/components/MeetYourhostSection/MeetYourHostLeft/MeetYourHostLeft.module.css
@@ -149,11 +149,25 @@
   text-align: left;
 }
 
-@media (max-width: 768px) {    
+@media (max-width: 768px) {  
   .mainContainer {
       width: 90%;
   }
   .profileText {
     padding-right: 20px;
   }
+  .personInfo {
+    font-size: 22px;
+    font-weight: 600;
+  }
 }
+
+@media (max-width: 480px) {  
+  .hostInfoContainer {
+    width: 310px;
+  }  
+  .personInfo {
+    font-size: 16px;
+  }
+}
+
diff --git a/src/components/MeetYourhostSection/MeetYourHostSection.module.css b/src/components/MeetYourhostSection/MeetYourHostSection.module.css
@@ -27,7 +27,13 @@
 }
 
 
-@media (max-width: 768px) {    
+@media (max-width: 768px) {  
+    .meetYourHostSection {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }  
     .meetYourHostSectionInnerContainer {
         grid-template-columns: 280px;
     }