CODEWITHSUNDEEP
htmlcss
Snake_py
Snake_py

Reputation: 582

Alternative to make a div full screen

.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">&times;</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">&times;</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">&times;</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">&times;</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>

Upvotes: 0

Views: 115

Answers (2)

Arun A S
Arun A S

Reputation: 7006

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

Upvotes: 3

h3yduck
h3yduck

Reputation: 1809

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

Upvotes: 1

Related Questions