White space popup and it increases if I add more text? see image
I’m trying to learn Css from Udemy and I got stuck on this problem. I asked there but I didn’t get an answer yet.. Is there any way to get rid of that white space down there? If I delete text, it disappear gradually and the same if I add text. Can anyone help me? Thanks
.popup { height: 100vh; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba($color-black, 0.8); z-index: 9999; &__content { @include absCenter; width: 75%; background-color: $color-white; box-shadow: 0 2rem 4rem rgba($color-black, 0.2); border-radius: 3px; display: table; overflow: hidden; } &__left { width: 33.333333%; display: table-cell; } &__right { width: 66.6666667%; display: table-cell; vertical-align: middle; padding: 3rem 5rem; } &__img { display: block; width: 100%; } &__text { font-size: 1.4rem; margin-bottom: 4rem; } }<div class="popup"> <div class="popup__content"> <div class="popup__left"> <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img"> <img src="img/nat-9.jpg" alt="Tour photo" class="popup__img"> </div> <div class="popup__right"> <h2 class="heading-secondary u-margin-bottom-small">Start booking now</h2> <h3 class="heading-tertiary u-margin-bottom-small">Important – Please read these term before booking</h3> <p class="popup__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sed nulla inventore dignissimos facilis excepturi rerum animi eius recusandae? Magni, saepe quo commodi sapiente maxime magnam earum quidem ipsa? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, tempore architecto. Alias atque facilis nemo asperiores, sint officiis similique sequi doloribus nisi, fugiat earum. Sequi nisi quidem mollitia error provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi aspernatur itaque omnis aut perferendis reprehenderit, nisi vero quis consectetur repellat asperiores et, natus eligendi deserunt eveniet nobis laboriosam quo minus? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, minus tenetur reiciendis nihil vitae neque quas consequatur totam itaque minima rerum, quam aspernatur dignissimos ducimus atque accusamus recusandae nesciunt cum? </p> <a href="#" class="btn btn--green">Book now </a> </div> </div> </div>
