我怎样才能让我的导航栏和多个轮播响应

Question

i made a multiple carousel header and everything looks pretty good in my desktop but when the device size changes the images overlap each other and the navbar is not responsive either, enter image description here i have tried everything but i am not able to fix it pls help my problem:

click here to see my problem

this is the code:

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none; }
.mySlides1 {display: none; }
.mySlides2 {display: none; }
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}


/* The dots/bullets/indicators */
.dot2 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot1 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
   -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.btn {
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #c7a343;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.btn:hover {
  background-color: black;
  color: white;
}

.champu{
  position: absolute;
  top: 6em;
  left: 10em;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  background-color:#9caaa9;
}

.img{
  width: 40em;
  height: 30em !important;
  object-fit: cover !important;

}

</style>
<div class="row">
<div class="col-md-12" style="background-image: url(background-.jpg);">
<div class="col-md-4">
<div class="slideshow-container"  style=" padding-left:0 !important; margin: 0 !important; padding: 0 !important;">

<div class="mySlides fade">
  <img src="slider-pics/living-room/pic2.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
  <a href="collections-livingroom.html">
  <button class="btn" style="top: 85%; left: 50%;">View Collection</button>
  </a>
</div>

<div class="mySlides fade">
  <img src="slider-pics/living-room/pic1.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
  <a href="collections-livingroom.html">
  <button class="btn" style="top: 85%; left: 50%;">View Collection</button>
  </a>
</div>

<div class="mySlides fade">
  <img src="slider-pics/living-room/pic3.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
  <a href="collections-livingroom.html">
  <button class="btn" style="top: 85%; left: 50%;">View Collection</button>
  </a>
</div>

<div class="mySlides fade">
  <img src="slider-pics/living-room/pic4.png" style="margin-top:9em; height: 30em !important; padding-left:1em !important; width: 37em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Living Room</h3>
  <a href="collections-livingroom.html">
  <button class="btn" style="top: 85%; left: 50%;">View Collection</button>
  </a>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
</div><!-- col-md-4-->

<div class="col-md-4">
<div class="slideshow-container" style="width: 43em !important; padding-right:4em !important; padding-left:0.2em; margin-left:0 !important;">

<div class="mySlides1 fade">
  <img src="slider-pics/bedroom/pic2.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides1 fade">
  <img src="slider-pics/bedroom/pic1.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides1 fade">
  <img src="slider-pics/bedroom/pic3.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides1 fade">
  <img src="slider-pics/bedroom/pic4.jpg" style="margin-top:9em; width: 45em !important; height: 30em !important;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Bedroom</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>


</div>
<br>

<div style="text-align:center">
  <span class="dot1"></span> 
  <span class="dot1"></span> 
  <span class="dot1"></span> 
  <span class="dot1"></span> 
</div>
</div><!-- col-md-4-->

<div class="col-md-4">
<div class="slideshow-container" style="padding-right:13em !important; width:50em; padding-left:1em;">

<div class="mySlides2 fade">
  <img src="slider-pics/outdoor/pic2.jpg" style="margin-top:9em;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides2 fade">
  <img src="slider-pics/outdoor/pic1.jpg" style="margin-top:9em;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides2 fade">
  <img src="slider-pics/outdoor/pic3.jpg" style="margin-top:9em;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

<div class="mySlides2 fade">
  <img src="slider-pics/outdoor/pic4.jpg" style="margin-top:9em;" class="img">
  <h3 class="champu" style="top: 40%; left: 25%;">Outdoor</h3>
  <button class="btn" style="top: 85%; left: 40%;">View Collection</button>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot2"></span> 
  <span class="dot2"></span> 
  <span class="dot2"></span> 
  <span class="dot2"></span> 
</div>
</div><!-- col-md-4-->
</div> <!-- col-md-12-->
</div><!-- row -->





<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3000); 
}

var slideIndex1 = 0;
showSlides1();

function showSlides1() {

  var i;
  var slides = document.getElementsByClassName("mySlides1");
  var dots = document.getElementsByClassName("dot1");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex1++;


  if (slideIndex1 > slides.length) {slideIndex1 = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex1-1].style.display = "block";  
  dots[slideIndex1-1].className += " active";
  setTimeout(showSlides1, 2000); 
}


var slideIndex2 = 0;
showSlides2();

function showSlides2() {

  var i;
  var slides = document.getElementsByClassName("mySlides2");
  var dots = document.getElementsByClassName("dot2");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex2++;


  if (slideIndex2 > slides.length) {slideIndex2 = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex2-1].style.display = "block";  
  dots[slideIndex2-1].className += " active";
  setTimeout(showSlides2, 4000); 
}

</script>

Answer 1

Use media query in CSS styling so you can design it as per the device size so that your images don't overlap You can go through this for reference: https://www.w3schools.com/Css/css3_mediaqueries_ex.asp