Кнопка в мобильной версии сайта html css

Web Frontend: JavaScript, HTML/CSS
#1

это кнопка которая показывается на версии сайта для пк, а на телефонах если зайти на сайт кнопку просто не видно. Возможно она как-то выходит за пределы экрана или что-то такое. Объясните что делать

http://dnevnik.h1n.ru/ex/

            <style>
            body{ 
                margin:0;
                padding:0;
            }
            .toolbar{
                z-index: 9999;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background-color: #222;
                border-bottom: 1px solid #ccc;
                
            }
            .toolbar a{
                color: #eee;
                display: inline-block;
                padding: 20px;
                text-decoration: none;
                font-family: Verdana;
            }
            .content{
                margin-top: 50px;
                padding: 10px;
            }
      
      }
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
html, body{background : #FBC02D; font-family : Roboto; height: 100%; width: 100%; margin: 0;}

#holder{
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  background: red;
  padding: 35px;
  width: 65px;
  margin: 0 auto;
  position: relative;
  margin-top : 0px;
  margin-right : 700px;
  
  transform: translateY(0);
  transform: translateX(-765px);
  box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
  border-radius: 0px;
}
.button {
  background: white;
  margin : -15px auto;
  width : 135px;
  height : 45px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  border-radius: 3px;
  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.btnTwo {
  position : relative;
  width : 200px;
  height : 100px;
  margin-top: -100px;
  padding-top: 2px;
  background : #222;
  left : -250px;
  transition : .3s;
}
.btnText {
  color : black;
  transition : .3s;
  margin-top : 12px;
  margin-right : 0px;
  font-size: 18px;
}
.btnText2 {
  margin-top : 58px;
  margin-right : -165px;
  color : #FFF;
}
.button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/
  left: -165px;
}
.button:hover .btnText{ /*When hovering over .button change .btnText*/
  margin-left : 32px;
}
.button:active { /*Clicked and held*/
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}      

        </style>

        <div class="toolbar">
            <div id="holder">

<div class="button" onclick="window.location.href = 'http://dnevnik.h1n.ru';">
    <p class="btnText">Назад</p>
    <div class="btnTwo">
      <p class="btnText2">GO!</p>
    </div>
 </div>

</div>
        </div>
#2

Ну оно же сдвинуто на 700рх, телефон в вертикальной ориентации видимо меньше.

Зачем такое странное вообще понадобилось?
Если убрать эти строки, то будет видно.

#3

убрал теперь видно на телефоне, но кнопка по центру а надо в лево,
А как мне переместить её в левый угол?

#4

DevTools помогает искать ответы на подобные вопросы. Там можно выделить элемент, потыкать его CSS свойства справа и т.д.

В данном случае видимо надо убрать

#5

есть возможность это делать без devtools?

#6

я нашёл способ надо написать

margin: 20px 0;
#7

F12 сложно нажать?

И что делать-то?
DevTools (Developer Tools/Инструменты Разработчика в браузерах) нужны просто для отладки кода, упрощения экспериментов. Чтоб узнать что собственно сделать надо.

Типа вместо того, чтобы в коде убирать/менять margin, сохранять файл, перезагружать страницу и т.д. для каждого свойства, можно просто тыкнуть на галочку у этого свойства на элементе и сразу увидеть что будет. И если произошло то, что хотелось, то тогда уже идти менять это в коде.

Ну и легко посмотреть к какому элементу какие правила применились/не применились.
CSS правила же могут накладываться друг на друга, и если один элемент подходит сразу под несколько селекторов указанных в стилях (может быть даже в разных файлах и т.п.), то легко может возникнуть ситуация, что получается не то, что ожидалось. А открыв DevTools сразу видно все правила применяемые к элементу, и показано какие из них неактивны.

#8

1000-7