Responsive Slider positioning

Question

I'm building a responsive website but i'm struggling with the dots of the slideshow as you see in the picture below which is when I toggle to the device toolbar they change their place i have tried everything that comes in my mind from the relative units to the absolute ones but nothing worked please I need help with that, i searched around in google and so on but i didn't find anything helpful.

when I toggle to the device toolbar:

as you notice the position of the dots changes i don't want this behaviour.

this is my code:

HTML:





  
  EatManger
  
  
  
  






  

    
      
    
    
    
      services
      reservation
      menu
      our chefs
      events
    

  

  
    
      
    
    
      
    

    
      
    

    
      
      
      
    


  





  
    
      
      Address
      4579 Penn Street,Manchester
united kingdom
    
    
      
      Phone
      636-399-9776 
 573-225-7350
    
    
      
      Opening time
      all the days of the week 
from 6 am to midnight
    




About us
  Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
    imprimeur
    anonyme assembla

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 4rem;
  background-color: red;
  transition: height .1s;
}

.container-add{
  height: 20rem;
}

.hamburger-btn {
  position: absolute;
  margin-top: 5px;
  right: 4px;
  font-size: 40px;
  color: white;
}

.logo-box {
  display: inline-block;
}

.logo {
  width: 100px;
}

.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15.62rem;
  align-items: center;
visibility: hidden;
}

.main-nav-hide{
  visibility:visible;
}

.main-nav-item {
  list-style: none;
  color: white;
  font-family: Roboto;
  text-transform: uppercase;
  font-weight: 700;
  /* display: none; */
}



.main-nav-link {
  text-decoration: none;
  color: inherit;
  padding-left: 20px;
}


.slideshow-container{
  margin: auto;
  max-width: 980px;
  width: 100vw;
}

.imgSlide{
  width: 100%;
}

.imgSlide-show{
  display: block;
}

.dotz{
  text-align: center;
  position: absolute;
  top: 35%;
  left: 50vw
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: #ddd
}

.active{
background-color: #ff9900;

}

.active:hover,.dot:hover{
  cursor: pointer;
}

.fade-zz{
  animation-name: fade;
  animation-duration: 1.4s;
  transition:.4s
}

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

.contact-box{
  background-color: red;
  position: relative;
  top: -1.39rem;
  height: 380px;
}

.conbox{
  color: white;
  display: block;
  text-align: center;
  font-size: 2rem;
  /* margin-top: .8rem; */
}


.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}


.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}


.opening-time{
  color: white;
  text-align: center;
  font-family: roboto;
  margin-top: 2rem;
}


.about-us{
  color: white;
}

.title{
  text-align: center;
  font-family: roboto;
}

.abicon{
  text-align: center;
  display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}

.title-description{
  display: block;
  margin: auto;
}

JavaScript

//HAMBURGER BUTTON

var hamBtn=document.querySelector(".hamburger-btn");

hamBtn.addEventListener("click",function(){
  document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");



});


//SLIDESHOW

slideIndex=0;

function currentSlide(n){
  slideIndex=n;
  showSlide(slideIndex);
}

function showSlide(n){
  var i;
  var slides=document.getElementsByClassName("mySlides");
console.log(slides);
  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(showSlide,50)

setInterval(showSlide,6000)

sorry about the question title i couldn't come up with a better one describing my situation any suggestion for a better title would be accepted to help other people who are struggling from the same problem find the solution and thank youu in advance.

mooga · Accepted Answer

just add to ".dotz" the following

.dotz{
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

To center any block has position:absolute you just need to left, right to 0 and margin to auto and for sure the parent div has to have position:relative

Responsive Slider positioning

Answers (1)

Related Questions