Modal is not responsive for mobile, How to make it responsive on mobile?

Question

My modal floats on the center of a desktop screen but on a mobile screen it floats on the top. When I keep reducing my screen size, it keeps holding its upper side, I want to show my modal content in the center of my phone screen. How can I make it float on the center of my phone's screen? I am attaching my code below. Thank you in advance.

 const modals = document.querySelectorAll(".modal"); const modalBtns = document.querySelectorAll(".button"); const closeBtns = document.querySelectorAll(".close"); // Events modalBtns.forEach((btn, index) => btn.addEventListener("click", () => openModal(index)) ); closeBtns.forEach((btn, index) => btn.addEventListener("click", () => closeModal(index)) ); // for closing when you click outside modals.forEach((modal, index) => modal.addEventListener("click", (e) => { if(e.target === e.currentTarget){ closeModal(index); } }) ); // Open function openModal(index) { modals[index].style.display = "block"; } // Close function closeModal(index) { modals[index].style.display = "none"; }

 /* Modal section styling */:root { --modal-duration: 1s; --modal-color: crimson; }.button { font-family: 'poppins', sans-serif; display: inline-block; background: crimson; color: #fff; font-size: 18px; font-weight: 500; padding: 8px 16px; margin-top: 20px; border-radius: 6px; border: 2px solid crimson; transition: all 0.3s ease; }.button:hover { color: crimson; background: none; }.modal { font-family: 'Poppins', sans-serif; display: none; position: fixed; z-index: 99999; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }.modal-content { margin: 51px auto; width: 60%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); animation-name: modalopen; animation-duration: var(--modal-duration); }.modal-header h2, .modal-footer h3 { margin: 0; }.modal-header { background: var(--modal-color); font-size: 20px; text-align: center; padding: 10px; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; }.modal-body { background:crimson; }.modal-footer { background: var(--modal-color); padding: 10px; font-size: 15px; color: #fff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }.close { float: right; font-size: 30px; color: #fff; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }.responsive { width: 100%; height: auto; } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } }

 <button id="modal-btn" class="button">Modal</button> <div id="my-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h3 style="font-weight: 400">On Going Project</h3> </div> <:-- Modal Body --> <div class="modal-body"> <img src="#" alt="" style="width;100%:height;100%;"> </div> <div class="modal-footer"> </div> </div> </div>

Answer 1

You can try with add some CSS code and this code for desktop and mobile both of screen in center position. i am sure this code helpful for you. jsfiddle link

.modal-content { margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}