I have used many containers and jumbotrons but I am getting too much of spacing in my web page and image slider works for 5 images?
How to reduce spacing between containers and how to make image slider work with any no. of images?
I designed a web page using html and css. I used many containers and jumbotrons but I am getting too much spacing vertically when I am opening the page in mobile view. I want to reduce that space. I alse used an image slider which is working fine with 5 images but with more than that the images start going below the previous ones. I have attached part of html code and part of css of image slider.
@keyframes slideshow { 10% {left: 0;} 20% {left: 0;} 30% {left: -100%;} 40% {left: -100%;} 50% {left: -200%;} 60% {left: -200%;} 70% {left: -300%;} 80% {left: -300%;} 90% {left: -400%;} 100% {left: -400%} } #slider{overflow:hidden;width:50%;margin:5px auto; border: 5px solid transparent;border-radius: 10px;} #slider figure img{width:20%;float:left;} #slider figure{position:relative;width:500%;margin:0;left:0;text-align:left;animation:15s slideshow infinite} @media screen and (max-width: 767px) {#slider {overflow: hidden; width: 100%; margin: 0 auto;}}<div class="container"> <div class="jumbotron"> <h1>Welcome to Trident!</h1> <h2>The Ultimate ESports tournament <br> platform made by gamers.</h2> <p></p> <p></p> <p></p> <p>Are you addicted to Online Games? Have you ever thought of earning through Online Gaming or from Playing Mobile Games? <br> What if you were rewarded for playing your favorite games and that too of which you are addicted to? <br> Well, <b>Trident</b> is the Platform which makes this possible.</p> <a href="#"><img class="download" src="https://playerzon.com/asset/download.png" alt=""></a> </div> </div> <div class="container"> <div class="jumbotron"> <h2>APP SCREENSHOTS!</h2> <div id="slider"> <figure> <img src="page.jpeg" style="max-height:50%; max-width:50%"/> <img src="page1.jpeg" style="max-height:50%; max-width:50%"/> <img src="welcome.jpeg" style="max-height:50%; max-width:50%"/> <img src="signup.jpeg" style="max-height:50%; max-width:50%"/> <img src="username.jpeg" style="max-height:50%; max-width:50%"/> <img src="login.jpeg" style="max-height:50%; max-width:50%"/> </figure> </div> <div id="ready" class="jumbotron"> <h2 class="ready">Are you ready? Give it a try!!!</h2> <a href="#"><img class="download" src="https://playerzon.com/asset/download.png" alt=""></a> </div> </div> </div> </div> </div> </body> </html>
