Popup Modal on Landing Page is Now Responsive on Smaller Screens (#791)

Resolved responsiveness issues with the default popup modal on the
landing page. The modal now adapts properly to smaller screens,
improving the user experience on mobile and tablet devices. Adjustments
were made using Flexbox properties like `flex-wrap`, along with media
queries to ensure the layout scales well on various screen sizes.

## Related Issues
- Closes #790

## Type of PR
- [ ] Bug Fix

## Screenshots 

### Before

<img width="315" alt="Screenshot 2024-10-29 at 9 20 31 PM"
src="https://github.com/user-attachments/assets/ed290f88-a17f-4d36-88fe-04cf4390b846">


### After

<img width="288" alt="Screenshot 2024-10-29 at 9 35 21 PM"
src="https://github.com/user-attachments/assets/9aec06ca-9fe1-4f51-8876-59f1fd72dfcf">
<img width="286" alt="Screenshot 2024-10-29 at 9 35 07 PM"
src="https://github.com/user-attachments/assets/4885b9c8-172f-4abf-9661-496a759daf8e">


## Checklist
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with the project’s `main`
branch before making this PR.
- [X] I have performed a self-review of my code.
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.

## Additional context
Used Flexbox properties to make the modal responsive, added media
queries for mobile compatibility, and tested the modal across common
screen sizes. This fix ensures a consistent and user-friendly layout on
smaller devices.

Css-files/popup.css

@@ -15,35 +15,52 @@
 
   .popup-content {
     display: flex;
+    flex-wrap: wrap;
     background-color: #feaea5;
     border-radius: 10px;
     max-width: 800px;
     height: 450px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    overflow-y: scroll;
+    width: 90%;
   }
 
   .popuplogo{
     position: absolute;
     top: 0;
     right: 12px;
-    height: 50px;
+    /* height: 50px; */
+    margin: 0;
+    padding: 0.2rem .6rem;
+    border-radius: 10px;
+    background-color: #feaea5;
   }
+  /* .popuplogo b{
+    margin: 0;
+  } */
 
   .popup-left img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-
+  .popup-left {
+    flex-grow: 1;
+    width: 50%;
+    min-width: 250px;
+  }
   .popup-right {
     padding: 20px;
     width: 50%;
     display: flex;
     flex-direction: column; 
     align-items: center;
     justify-content: center;
+    flex-grow: 1;
+    text-align: center;
+    /* min-width: 300px; */
   }
 
   .popup h1 {

index.html

@@ -604,7 +604,7 @@
             <div class="popup-left">
                 <img src="Images/popup.jpg" alt="Retro Vintage Charm">
             </div>
-            <a href="#" class="no-thanks popuplogo" style="font-family: var(--ff-philosopher); color: black;"><b>Retro</b></a>
+            <a href="#" class="no-thanks popuplogo" style="font-family: var(--ff-philosopher); color: black;"><b class="popup-logo">Retro</b></a>
             <div class="popup-right">
                 <h1>Discover the Past!</h1>
                 <p id="h2">Sign Up for Exclusive Vintage Deals</p>