Modal is perfectly wide for computer screen but on mobile screen it not perfectly wide. How to make-CodePudding

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" >Modal</button>
<div id="my-modal" >
    <div >
    <div >
        <span >&times;</span>
        <h3 style="font-weight: 400">On Going Project</h3>
    </div>
    <!-- Modal Body -->
    <div >
        <img src="#" alt="" style="width:100%;height:100%;">
    </div>
    <div >
        </div>
    </div>
</div>

CodePudding user response：

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" >Modal</button>
<div id="my-modal" >
    <div >
    <div >
        <span >&times;</span>
        <h3 style="font-weight: 400">On Going Project</h3>
    </div>
    <!-- Modal Body -->
    <div >
        <img src="#" alt="" style="width:100%;height:100%;">
    </div>
    <div >
        </div>
    </div>
</div>

CodePudding user response：

You can use media queries:

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