изображение уходит с позиции на мобильный

Question

Я пытаюсь создать слайдер. И я расположил кнопки направлений нав через образы, но когда я иду на мобильный зрения, кнопки идут далеко, вот фрагмент кода,

<div class="design container"> 
    <section class="subcontainer"> 
     <h2> 
      I love to <span id="purple">design</span> beautiful websites and making<br> my code as good as it can 
     </h2> 

     <div class="slider"> 

      <div class="slide"> 
       <img src="images/charity.jpg" width="100%"> 
      </div> 
      <div class="slide"> 
       <img src="images/doveyjean.jpg" width="100%"> 
      </div> 
      <div class="slide"> 
       <img src="images/1.jpg" width="100%"> 
      </div> 

     </div> 
     <div class="slider-nav"> 
      <div class="directional-buttons"> 
      <img class="backward" src="images/backward.png" width="8%"> 
      <img class="forward" src="images/forward.png" width="8%"> 
      </div> 


      <!-- dots --> 
      <ul> 
       <li class="active"></li> 
       <li></li> 
       <li></li> 
      </ul> 

     </div> 

     <div class="button"> 
      <a href="#"><img src="images/more.png"></a> 
     </div> 

    </section> 
</div> 

вот CSS, FYI я использовал сброс CSS:

body{ 
    margin: 0 auto; 
    height: 100vh; 
    font-family: 'Open Sans', sans-serif; 
    background-image: url(../images/background.jpg); 
    background-size: cover; 
    background-position: center; 
} 

header,section { 
    height: 100%; 
} 

.container{ 
    width: 80%; 
    margin: 0 auto; 
    } 

.subcontainer { 
    width: 93.75%; 
    margin: 0 auto; 
}  

.design{ 
    background-color: #fff; 
    margin-top: 3%; 
    height: 140vh; 
} 

.design h2{ 
    font-size: 1.75em; 
    text-align: center; 
    padding-top: 4%; 
    line-height: 1.3; 
} 

#purple { 
    color: #6600ff; 
} 

.slider{ 
    padding-top: 3%; 
} 

.slide{ 
    display: none; 
} 

.slide:first-child { 
    display: block; 
} 

.button { 
    text-align: center; 
    padding-bottom: 3%; 
} 

.slider-nav{ 
    height: 10%; 
} 

.slider-nav ul{ 
    text-align: center; 
    position: relative; 
    top: -55px; 
} 

.slider-nav li{ 
    list-style: none; 
    background-color: black; 
    width: 10px; 
    height: 10px; 
    margin: 3px; 
    border-radius: 100%; 
} 

.slider-nav li.active{ 
    background-color: #0060ff; 
} 

.directional-buttons{ 
    position: relative; 
    top: -350%; 
    cursor: pointer; 

} 

.forward{ 
    float: right; 
} 

Я отправляю скриншот дизайна,

desktop view

mobile view

Как всегда держать направляющие кнопки в вертикальном центре ползунка и в точках ниже ползунка? любые предложения приветствуются, и если эти меры предлагаются в процентах, это было бы здорово. Спасибо!

Answer 1

Put ДИВ .directional-buttons в слайдере сНу, чтобы увидеть, что, как это:

<div class="slider"> 

      <div class="slide"> 
       <img src="../a.jpg" style="height: 50vw;width: 100%;" width=""> 
      </div> 
      <div class="slide"> 
       <img src="images/doveyjean.jpg" width="100%"> 
      </div> 
      <div class="slide"> 
       <img src="images/1.jpg" width="100%"> 
      </div> 
      <div class="directional-buttons"> 
       <img class="backward" src="images/backward.png" width="8%"> 
       <img class="forward" src="images/forward.png" width="8%"> 
      </div> 
     </div> 

и добавить стили:

.slider { 
    position: relative; 
} 

.directional-buttons { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
}