From 57169006adcd5374b2071a57ce57d5e5e2ac59a5 Mon Sep 17 00:00:00 2001
From: Rajveer Singh <rajveergreets@gmail.com>
Date: Tue, 29 Oct 2024 21:21:42 +0530
Subject: [PATCH] Fixed popup for smaller screens

---
 Css-files/popup.css | 21 +++++++++++++++++++--
 index.html          |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/Css-files/popup.css b/Css-files/popup.css
index b429412f..2cc2524e 100644
--- a/Css-files/popup.css
+++ b/Css-files/popup.css
@@ -15,6 +15,7 @@
   
   .popup-content {
     display: flex;
+    flex-wrap: wrap;
     background-color: #feaea5;
     border-radius: 10px;
     max-width: 800px;
@@ -22,21 +23,34 @@
     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%;
@@ -44,6 +58,9 @@
     flex-direction: column; 
     align-items: center;
     justify-content: center;
+    flex-grow: 1;
+    text-align: center;
+    /* min-width: 300px; */
   }
   
   .popup h1 {
diff --git a/index.html b/index.html
index cd0745ad..5f243e3d 100644
--- a/index.html
+++ b/index.html
@@ -601,7 +601,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>