Alternative to make a div full screen - html

Question

.pop-up {
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90vh;
width: 50vw;
max-width: 80%;
background-color: #132c23;
border: 5px solid #fffbce;
border-radius: 20px;
}
.wrap-pop-up-div {
height: 100%;
width: 100%;
position: relative;
}
.pop-carousel {
position: absolute;
top: 12.5%;
left: 30%;
}
.close-modal {
position: absolute;
right: 5%;
top: 2%;
outline: none;
background: none;
cursor: pointer;
border: none;
font-size: 3rem;
color: #fffbce;
}
.close-modal:hover {
color: #510000;
transition-duration: 300ms;
}
.pop-carousel .container-carousel {
overflow: hidden;
width: 600px;
height: auto;
}
.pop-carousel .slides {
display: flex;
align-items: center;
align-content: center;
}
.pop-carousel img {
width: 600px;
height: 400px;
flex-shrink: 0;
}
.list-pop-up {
position: relative;
left: 2%;
top: 15%;
}
.pop-up ul {
padding: 0px;
list-style: none;
font-family: rochester;
font-size: 1.8rem;
}
.pop-up ul a {
color: #fffbce;
text-decoration: none;
}
.pop-up ul a:hover {
color: #4c8d49;
text-decoration: underline;
transition-duration: 350ms;
}
.pop-up ul a.active {
color: #4c8d49;
text-decoration: underline;
}
.pop-up ul li {
padding: 10px 0;
}
.wrap-pop-up-div > .para-div,
.wrap-pop-up-div > a {
position: absolute;
top: 70%;
}
.wrap-pop-up-div > .para-div {
left: 30%;
width: 600px;
text-align: justify;
font-size: 1.2rem;
color: #fffbce;
}
.wrap-pop-up-div > a {
left: 7.5%;
top: 80%;
text-decoration: none;
color: #fffbce;
font-size: 1.3rem;
border: 2px solid #fffbce;
padding: 5px 7.5px;
border-radius: 5px;
}
.wrap-pop-up-div > a:hover {
border-color: #510000;
background-color: #510000;
transition-duration: 200ms;
-webkit-transition-duration: 200ms;
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
}
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
<div class="pop-up" >
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a class="active" href="#">
Badeparadies
</a>
</li>
<li>
<a href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a href="#">
Badeparadies
</a>
</li>
<li>
<a class="active" href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
</div>
</div>
<div class="overlay show-toggle"></div>
I have some modals, which should pop up in full screen at 950px (max-width). Thus I implemented a media query but it does not work. Does anyone know an alternative way? I also tried to on my pop-up class a 100vw but this had no effect at all. Perhaps someone has an idea why? The code I post here is basically the way how I did it for my background of the modal (the greyish overlay), so it worked for me in this document already, seems odd that it isn't working now.
CSS:
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
HTML:
<div class="pop-up" >
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a class="active" href="#">
Badeparadies
</a>
</li>
<li>
<a href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a href="#">
Badeparadies
</a>
</li>
<li>
<a class="active" href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
</div>
</div>
<div class="overlay show-toggle"></div>

Answer 1

You have
max-width: 80%;
transform: translate(-50%, -50%);
in your style for pop-up. Change your css to
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
max-width: 100%;
transform: translate(0, 0);
}
}

Answer 2

.pop-up {
transform: translate(-50%, -50%);
max-width: 80%;
border: 5px solid #fffbce;
border-radius: 20px;
}
messes up your popup if your media query is active. Add
#media (max-width: 950px) {
.pop-up {
transform: none;
max-width: 100%;
border: none;
border-radius: 0;
}
}
as well and it should be good.