Я создаю адаптивный веб-сайт, но я борюсь с точками слайд-шоу, как вы видите на рисунке ниже, когда я переключаюсь на панель инструментов устройства, они меняют свое место, я перепробовал все, что приходит мне в голову От относительных единиц до абсолютных, но ничего не помогло, пожалуйста, мне нужна помощь с этим, я искал в Google и так далее, но ничего полезного не нашел.
при переключении на панель инструментов устройства :
когда вы замечаете, что положение точек меняется, я не хочу, чтобы это поведение.
это мой код:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EatManger</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="query.css">
</head>
<body style="background-color:purple">
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="logo">
</div>
<i class="fas fa-bars hamburger-btn"></i>
<ul class="main-nav">
<li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="mySlides fade-zz">
<img src="images/food3.png" class="imgSlide">
</div>
<div class="mySlides fade-zz">
<img src="images/pizza.png" class="imgSlide" >
</div>
<div class="mySlides fade-zz">
<img src="images/hamburger2.png" class="imgSlide">
</div>
<div class="dotz">
<span class="dot" onclick="currentSlide(1-1)"></span>
<span class="dot" onclick="currentSlide(2-1)"></span>
<span class="dot" onclick="currentSlide(3-1)"></span>
</div>
</div>
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt conbox"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume conbox"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock conbox"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
<p class="title-description">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 </p>
</section>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
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)
извините за заголовок вопроса, я не смог придумать лучшего, описывающего мою ситуацию, было бы принято предложение о лучшем названии, чтобы помочь другим людям, которые борются с той же проблемой, найти решение и заранее поблагодарить вас.