Fixed popup for smaller screens

Anjaliavv51 · Oct 29, 2024 · 5716900 · 5716900
1 parent d393add
commit 5716900
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/Css-files/popup.css b/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 {

diff --git 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>