Need to fix slideshow and figure out responsiveness. only CSS/HTML

The image is cut off a bit and the text to the left isn’t centering also I tried to add a min-height to the pics and max-width to banner image for responsiveness but they didn’t take. any tips on these?

HTML

<main>
    <!--BANNER-->
        <section class="banner">
            <div class="container">
                <div class="banner-content">
                    <h1>ALEESHA</h1>    
                </div>
            </div>
        </section>
    <!--HATS-->
        <section class="hats">
            <div class="hat-text">
                <H2>HATS</H2>
            </div>
            <div id="slider">
                <figure>
                    <img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
                    <img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
                    <img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
                    <img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
                    <img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
                </figure>
            </div>
        </section>
    </main>
</body>
</html>```

CSS

*{

box-sizing: border-box;

padding: 0;

margin: 0;

}

body{

font-family: 'Comfortaa', cursive;

}

ul{

list-style-type: none;

}

a{

text-decoration: none;

color: black;

}

h1{

font-family: 'Righteous', cursive;

font-size: 4rem;

}

img{

width: 100%;

}

header{

height: 8vh;

width: 90%;

margin: 0 auto;

}

.nav-links{

height: 8vh;

width: 0 auto;

display: flex;

justify-content: space-around;

align-items: center;

}

.nav-link:hover{

border-bottom: 4px black solid;

}

.banner{

background-image: url(/Aleesha/woman\ wit\ hat.jpg);

background-position: center;

background-repeat: no-repeat;

background-size: cover;

width: 100%;

height: 30vh;

margin-bottom: 2vh;

}

.hats{

display: flex;

height: 40vh;

}

.hat-text{

border: 2px dotted;

flex: 1;

display: flex;

}

h2{

width: 100%;

border: 2px dotted;

font-size: 8rem;

align-items: center;

}

#slider {

flex: 1.8;

overflow: hidden;

}

#slider figure {

position: relative;

width: 500%; 

margin: 0;

left: 0;

animation: 20s slider infinite;

}

#slider figure img {

width: 100%; 

float: left;

max-width: 20%;

min-height: 100%;

object-fit: contain;       

}

@keyframes slider {

0% { left: 0; } 

20% { left: 0; }

25% { left: -100%; }

45% { left: -100%; }

50% { left: -200%; }

70% { left: -200%; }

75% { left: -300%; }

95% { left: -300%; }

100% { left: -400%; }

}

I saw you posted this topic several times now without getting replies. I think this topic is too complex to get help here. I would recommend that you ask for help for one issue at a time with smaller chunks of formatted code (see guide here) and a link to the complete code on GitHub.
It would also help if you could provide a link to the website. You could host your website on GitHub Pages for example.
On a first post regarding this topic, you got the answer that you’ll need to add some Javascript for a slideshow. I agree. It is possible to have a keyframe animation and run it infinitely, but there will always be a hard reset rather than a smooth and seemless transition when the last keyframe is reached and the animation has to start again.

1 Like

ok. ill try there. thanks