I am encountering issues with the image gallery on my website, as it seems to create a space to the right when viewed on screens smaller than 350px. This results in a gap on the entire right side of the page. My goal is to make this image gallery responsive so that all elements resize based on the viewer's screen size.
Below is the code snippet:
CSS
.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 50%;
opacity: 0;
margin-left: 0px;
margin-top: 0px;
position: absolute;
width: 100%;
left: -1px;
z-index: 0;
border: thin solid black;
}
.crossfade > figure:nth-child(1) {
background-image:url(001.jpg);
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image:url(002.jpg);
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image:url(003.jpg);
}
.crossfade > figure:nth-child(4) {
animation-delay: 18s;
background-image:url(004.jpg);
}
.crossfade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url(005.jpg);
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
HTML
<body>
<figure class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</figure>
</body>
I believe that sharing this code will help you understand the issue I'm facing with the image gallery. Although I intended for it to be responsive, there seems to be a misalignment causing a shift to the right on the website layout.