Modal is perfectly wide for computer screen but on mobile screen it not perfectly wide. How to make my modal responsive on optimize for mobile screen?

Question

In my portfolio, I have implemented modals to showcase my project. My modal is perfectly responsive for the desktop screen but on the mobile screen, my modal is not perfectly wide to showcase the modal content. How to optimize my modal for the mobile screen to show my modal content perfectly wide? It would be very helpful for me if anyone can help me. Thanks 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 {
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);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.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 use media queries:

@media only screen and (max-width: 500px) {
    .modal-content {
        width: 90%;
    }
}

Answer 2

Adding a media query for the width of the modal-content on smaller screen sizes seems to do the trick.

Here, we've set the .modal-content width to be 90% when the screen width is less than or equal to 576px;

   @media (max-width: 576px) {
   .modal-content
     {
       width:90%;
     } 
   }

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 {
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);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.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;
}
}


@media (max-width: 576px) {
.modal-content
{
    width:90%;
}

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