I am currently working on a slideshow project and have encountered an issue. The divs in my project are positioned absolutely with left: 100%. While this works perfectly on full screen, the absolute positioning breaks when I resize the screen due to the overflow-x: hidden; applied to the body and html tags. How can I resolve this problem?
Below is the code snippet:
html,
body {
margin: 0 auto;
overflow-x: hidden;
}
.slides {
width: 100%;
height: 100vh;
position: absolute;
}
.slide-img {
width: 100%;
height: 100%;
}
#slide-2 {
left: 100%;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marseille</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="slides" id="slide-1">
<img class="slide-img" src="media/slideshow/image-1.jpg">
</div>
<div class="slides" id="slide-2">
<img class="slide-img" src="media/slideshow/image-2.jpg">
</div>
<div class="slides" id="slide-3">
<img class="slide-img" src="media/slideshow/image-3.jpg">
</div>
<div class="slides" id="slide-4">
<img class="slide-img" src="media/slideshow/image-4.jpg">
</div>
</body>
</html>