Responsive popup window CSS - html

Question

a pop-up window is displayed when the user click to a specific link. . I can not figure out how to make it responsive. On smaller screens, the bottom of the pop-up window is out of range .
HTML code:
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h2>Job Details</h2>
<div class="popup-job-description">
<div class="job-descriptions">
<p><span class="popup-job-description-title">Title: </span>Process Engineer</p>
</div>
<div class="job-descriptions">
<p><span class="popup-job-description-company">Company: </span>Undisclosed</p>
</div>
<div class="job-descriptions">
<p><span class="popup-job-description-location">Location: </span>Naypyitaw</p>
</div>
<div class="job-descriptions">
<p><span class="popup-job-description-location">Salary: </span>$75,000</p>
</div>
<div class="job-descriptions">
<p><span class="popup-job-description-description">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et similique ex, iusto sint in ratione aut magnam! Accusamus eveniet aspernatur nihil? Distinctio vel fugiat eius eaque? Quas earum adipisci quis voluptate animi id atque alias. Sapiente aut explicabo voluptate!</p>
</div>
<div class="job-descriptions requirements">
<p><span class="popup-job-description-requirements">Requirements: </span><ul>
<li>Bachelor's degree</li>
<li>At least 3 years of experience in a similar position</li>
<li>Fluent in English and Mandarin</li>
</ul></p>
</div>
<a class="apply-button" href="#">Apply Now</a>
</div>
</div>
CSS here:
/Job Popup/
.model{
width:100%;
height:100%;
background-color: black;
opacity: 0.5;
position: absolute;
top:0;
}
.popup-wrapper{
opacity: 1;
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
display: none;
}
.popup-wrapper .popup{
max-width: 60%;
min-width: 40%;
background: white;
margin: auto auto;
padding: 4rem 2rem 4rem 2rem;
}
.popup-wrapper .popup h2{
text-align: center;
color:#0b1f49;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.popup-wrapper .popup-close{
position:absolute;
top:8%;
right:22%;
cursor:pointer;
font-size: 22px;
}
.popup-wrapper .popup a{
background:#5286ec;
color:white;
text-decoration:none;
padding:20px 35px;
position:relative;
}
.popup-job-description{
align-content:
}
.job-descriptions {
padding:0.75rem;
}
.job-descriptions span{
color:#2260dd;
font-weight: bold;
letter-spacing: 1.5px;
}
.popup-job-description .requirements ul{
margin: 0rem 0rem 2.5rem 1rem;
}
.popup-job-description .requirements li{
font-size: 18px;
margin: 5px;
}
I also have a little problem as you may have notice with the "x" or close-window at the top right of the pop-up window, I used a the absolute value as a display but it seems that it does really work.

Answer 1

Just add overflow-y: scroll; to your .popup-content.
Regarding the close button, you may want to use values in em. Here percentage is percentage of the width for the y coordinate and percentage of height for y coordinate. Since height vary with content, you get unpredictable results.