помогите с кнопками, пожалуйста!

[ne_beret]

привет, можешь помочь чуть чуть) есть такой сайт     Мир-климата-брянск.рф         там есть 3 кнопки справа и одна слева  типо бесплатный замер, <div class="obrvz">
                            <img src="http://xn—--7kcag1bbpfehfr6ajrl2v.xn--p1ai/wp-content/uploads/2018/03/-1-e1520153199397.png" class="popmake-326"/>
                        </div>
                        <a class="but" href="http://xn—--7kcag1bbpfehfr6ajrl2v.xn--p1ai/%D0%B0%D0%BA%D1%86%D0%B8%D0%B8/">Акции</a>
                        <a class="bat" href="http://xn—--7kcag1bbpfehfr6ajrl2v.xn--p1ai/%D0%BD%D0%B0%D1%88%D0%B8-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B/">Наши работы</a>
                        <a href="#" class="popmake-334">Задать вопрос</a>

и вот такие стили к ним

.obrvz img {
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 30%;
}

@media (max-width: 767px) {
  .obrvz {
    display: none;
  }
}

body {background: #A4DADA;}
a.but {
  position: fixed;
  right: 0;
  top: 30%;
  text-align: center;
  width: 140px;
  text-decoration: none;
  outline: none;
  padding: 3px 10px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 35px 35px #2D89EF inset, 0 0 0 0 #2D89EF;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  color: #FFFFFF;
  transition: .15s ease-in-out;
}
a.but:hover {
  box-shadow: 0 0 10px 0 #2D89EF inset, 0 0 10px 4px #2D89EF;
  color: #2D89EF;
}

@media (max-width: 767px) {
  a.but {
    display: none;
  }
}

body {background: #A4DADA;}
a.bat {
  position: fixed;
  right: 0;
  top: 40%;
  text-align: center;
  width: 140px;
  text-decoration: none;
  outline: none;
  padding: 3px 10px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 35px 35px #2D89EF inset, 0 0 0 0 #2D89EF;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 2px;
  color: #FFFFFF;
  transition: .15s ease-in-out;
}
a.bat:hover {
  box-shadow: 0 0 10px 0 #2D89EF inset, 0 0 10px 4px #2D89EF;
  color: #2D89EF;
}

@media (max-width: 767px) {
  a.bat {
    display: none;
  }
}

body {background: #A4DADA;}
a.popmake-334 {
  position: fixed;
  right: 0;
  top: 50%;
  text-align: center;
  width: 140px;
  text-decoration: none;
  outline: none;
  padding: 3px 10px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 35px 35px #2D89EF inset, 0 0 0 0 #2D89EF;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 2px;
  color: #FFFFFF;
  transition: .15s ease-in-out;
}
a.popmake-334:hover {
  box-shadow: 0 0 10px 0 #2D89EF inset, 0 0 10px 4px #2D89EF;
  color: #2D89EF;
}

@media (max-width: 767px) {
  a.popmake-334 {
    display: none;
  }
}

#kont {
  position: fixed;
  top: 7%;
  right: 1.5%;
  font-weight: bold;
  color: #333333;
}


@media (max-width: 767px) {
  #kont {
    display: none;
  }
}

Вопрос!!! на мониторе 22-24 дюйма во весь экран всё выглядит хорошо, а вот на мониторах меньше или если просто сжимать окно , то всё уменьшается , а кнопки нет, тем самым загораживая информацию. Как сделать чтоб это всё корректно выглядело ? 

[mrnobody]

Кнопки может развернуть. вот так примерно

https://codepen.io/corvus-007/pen/rvjBmp?editors=1100

А вот с бесплатным замером не знаю что можно сделать. Может иконку с рулеткой какую-нибудь показывать.

Хотя и кнопки справа тоже можно сделать с иконками. Видны только иконки, а при наведении на враппер кнопок с иконками, они выезжают полностью.

Вот пример https://codepen.io/corvus-007/pen/odBvPO?editors=0100