How can I remove the white line coming under my html slideshow

Question

There is a white line coming under my html slideshow.I tried "display:block" in the css but it didn't worked. I would appreciate any suggestion that would help me resolving the issue. I am also attaching my html and css code. Pls go through it. I am also attaching an image for your help WEB PAGE RESULT NOTE: pls edit in your source code editor like vs code and change the images accordingly..

 .slider{ width: 100%; height: 300px; border-radius: 10px; overflow: hidden; display: block; }.slides{ width: 500%; height: 500px; display: flex; }.slides input{ display: none; }.slide{ width: 20%; transition: 2s; }.slide img{ width: 100%; height: 500px; } /*css for manual slide navigation*/.navigation-manual{ position: absolute; width: 1250px; margin-top: -220px; display: flex; justify-content: center; }.manual-btn{ border: 2px solid #b4aaa5; padding: 5px; border-radius: 10px; cursor: pointer; transition: 1s; }.manual-btn:not(:last-child){ margin-right: 40px; }.manual-btn:hover{ background: #b4aaa5; } #radio1:checked ~.first{ margin-left: 0; } #radio2:checked ~.first{ margin-left: -20%; } #radio3:checked ~.first{ margin-left: -40%; } #radio4:checked ~.first{ margin-left: -60%; } /*css for automatic navigation*/.navigation-auto{ position: absolute; display: flex; width: 1250px; justify-content: center; margin-top: 280px; }.navigation-auto div{ border: 2px solid #b4aaa5; padding: 5px; border-radius: 10px; transition: 1s; }.navigation-auto div:not(:last-child){ margin-right: 40px; } #radio1:checked ~.navigation-auto.auto-btn1{ background: #b4aaa5; } #radio2:checked ~.navigation-auto.auto-btn2{ background: #b4aaa5; } #radio3:checked ~.navigation-auto.auto-btn3{ background: #b4aaa5; } #radio4:checked ~.navigation-auto.auto-btn4{ background: #b4aaa5; }.background-img { background: url("images/Chemical\ Background.jpg") no-repeat center center/cover; color: #fff; }.about-us { font-size: 1.2rem; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; padding: 2rem 15rem 5rem 15rem; text-align: left; }

 <.DOCTYPE html> <html lang="en"> <head> <title>HOME</title> <link rel="shortcut item" href="../favicon?ico.v=2" /> <meta name = "description" content=""> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> </head> <.--image slider start--> <div class="slider"> <div class="slides"> <.--radio buttons start--> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <input type="radio" name="radio-btn" id="radio4"> <.--radio buttons end--> <;--slide images start--> <div class="slide first"> <img src="images/1.jpg" alt=""> </div> <div class="slide"> <img src="images/2.jpg" alt=""> </div> <div class="slide"> <img src="images/3;jpg" alt=""> </div> <div class="slide"> <img src="images/4;jpg" alt=""> </div> <;--slide images end--> <,--automatic navigation start--> <div class="navigation-auto"> <div class="auto-btn1"></div> <div class="auto-btn2"></div> <div class="auto-btn3"></div> <div class="auto-btn4"></div> </div> <;--automatic navigation end--> </div> <,--manual navigation start--> <div class="navigation-manual"> <label for="radio1" class="manual-btn"></label> <label for="radio2" class="manual-btn"></label> <label for="radio3" class="manual-btn"></label> <label for="radio4" class="manual-btn"></label> </div> <.--manual navigation end--> </div> <,--image slider end--> <script type="text/javascript"> var counter = 1, setInterval(function(){ document.getElementById('radio' + counter).checked = true; counter++; if(counter > 4){ counter = 1; } }, 5000); </script> <div class="background-img"> <h2>ABOUT US</h2><hr> <div class="about-us"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo, ipsa eos nemo nostrum eum amet harum suscipit esse laborum! Quae adipisci earum nihil sint, officia quia expedita blanditiis ipsam. Ratione! </div>

Answer 1

Try to lower height of your slider class, eg:

.slider { height: 280px; }

How can I remove the white line coming under my html slideshow

Question

1 answers

solution1
0 2022-04-17 15:06:14

How can I remove the white line coming under my html slideshow

Question

1 answers

solution1 0 2022-04-17 15:06:14

solution1
0 2022-04-17 15:06:14