From dad75dd0669d48660448ab0dc6b9ef4eacc95316 Mon Sep 17 00:00:00 2001
From: FaheemOnHub <faheemmushtaq89@gmail.com>
Date: Sat, 31 Aug 2024 12:19:56 +0530
Subject: [PATCH] fixed login page not visible on mobile-screen

---
 assets/css/popup.css | 48 ++++++++++++++++++++++++++++++++++++++------
 index.html           |  9 ++++++---
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/assets/css/popup.css b/assets/css/popup.css
index fba02949..dbd8aa62 100644
--- a/assets/css/popup.css
+++ b/assets/css/popup.css
@@ -1,9 +1,7 @@
-/* The Modal (background) */
 .modal {
   display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
+  position: fixed;
   z-index: 1; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
@@ -16,11 +14,14 @@
 /* Modal Content */
 .modal-content {
   background-color: #fefefe;
-  margin: auto;
+  margin: 10% auto; /* Adjusted for better vertical centering */
   padding: 20px;
   border: 1px solid #888;
-  width: 450px;
-  text-align: center; /* Added */
+  width: 90%; /* Use percentage for responsiveness */
+  max-width: 450px; /* Maximum width from your original CSS */
+  text-align: center;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* The Close Button */
@@ -29,11 +30,46 @@
   float: right;
   font-size: 28px;
   font-weight: bold;
+  cursor: pointer;
 }
 
 .close:hover,
 .close:focus {
   color: #000;
   text-decoration: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 575px) {
+  .modal-content {
+    margin: 5% auto; /* Less top margin on small screens */
+    width: 95%; /* Slightly wider on very small screens */
+    padding: 15px;
+  }
+}
+
+/* Additional styles for form elements */
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.main-btn {
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
   cursor: pointer;
 }
+
+.main-btn:hover {
+  background-color: #0056b3;
+}
diff --git a/index.html b/index.html
index 894c5ab6..b3b9707d 100644
--- a/index.html
+++ b/index.html
@@ -223,7 +223,7 @@
       <div class="container">
         <div class="row">
           <div class="col-lg-12">
-            <nav class="navbar navbar-expand-lg">
+            <nav class="navbar navbar-expand-lg " style="display: flex;">
               <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="toggler-icon"></span>
@@ -257,10 +257,10 @@
                   </li>
                 </ul>
               </div>
-              <div class="navbar-btn d-none d-sm-inline-block">
+              <div class="">
                 <!-- Login Modal -->
           <div id="myModal" class="modal">
-            <div class="modal-content">
+            <div class="modal-content" >
               <span class="close" style="display: flex; justify-content: right;">&times;</span>
               <div class="mt-3">
                 <h3 class="join"><i class="fa-solid fa-right-to-bracket"></i>  Login to join us....</h3>
@@ -1775,6 +1775,9 @@ <h4 class="title custom-margin">Contact Us</h4>
     document.getElementById("copyright-year").textContent = new Date().getFullYear();
   </script>
   <script>
+
+
+
     // Get the modals
     var loginModal = document.getElementById('myModal');
     var registerModal = document.getElementById('registerModal');