Как скрыть элемент на телефонах и планшетах?

Question

[Elbakidze]

Нужно скрыть кнопку НАЙТИ РАБОТУ на телефонах и планшетах.

<div class="slider-form">
    <div class="lg-centerwrap centerwrap">
      <div class="row clearfix">
        <div class="colmd6">
          <h1>
            <div class="slider-midtext">Разработчики, дизайнеры и другие профессионалы готовы выполнить вашу задачу здесь и сейчас.</div>
          </h1>
          <div class="role-buttons">
          <a class="button green auto signup-js" href="">НАЙТИ СПЕЦИАЛИСТА</a>
          <div class="clear showsmall"></div>
          <a class="button green auto signup-js" href="">НАЙТИ РАБОТУ</a>
            </div>
          <div class="slider-smalltext">
            Мы обеспечим безопасную сделку и защитим ваши деньги
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

[Ankhena]

@media (max-width: 768px) {
стили для вьюпортов меньше или равных 768px
}

И не забудьте

<meta name="viewport" content="width=device-width, initial-scale=1">

Comments

[Elbakidze]

Это что куда нужно прописать? Это в ксс?:

@media (max-width: 768px) {
стили для вьюпортов меньше или равных 768px
}

Это где сами кнопки ?:

<meta name="viewport" content="width=device-width, initial-scale=1">

[Ankhena]

Elbakidze, стили в css, теги в разметку.
Конкретно этот мета-тег в раздел head

[Elbakidze]

Ankhena,

<meta name="viewport" content="width=device-width, initial-scale=1">

это в head вставляю, а это вместо русских букв что то нужно?

@media (max-width: 768px) {
стили для вьюпортов меньше или равных 768px
}

[Ankhena]

Elbakidze, вероятно, задать отдельный класс интересующей вас ссылке и написать ей display: none
Сейчас у вас у всех ссылок одинаковые классы, а значит, спрячутся все.

p.s. Настораживают <div class="clear showsmall"></div> в разметке.
Во-первых, наличие пустых блоков с вероятностью 99% говорят о том, что вы делаете что-то не так.
Во-вторых, класс clear использовали для очистки потока при верстке на флоатах.
Но флоаты для раскладки блоков не использую уже лет 5.
Если вы еще используете, то скорее почитайте про гриды и флексы.

[Elbakidze]

Ankhena, То есть мне нужно новый класс сделать на кнопку в этом классе прописать такие же параметры там цвет шрифт и тд и прописать в этом новом классе вот это? :

@media (max-width: 768px) {
стили для вьюпортов меньше или равных 768px
}

и в head вот это добавить?:

<meta name="viewport" content="width=device-width, initial-scale=1">

[Ankhena]

Elbakidze,

в этом классе прописать такие же параметры там цвет шрифт и тд

Не поняла, зачем скрытому элементу цвет, шрифт и прочее

и в head вот это добавить?:

да

[Elbakidze]

Ankhena, leelo.ru смотрите как с телефона отображается, вторая кнопка не видна что можно сделать?

[Ankhena]

Elbakidze, перестать задавать фиксированную высоту

[Elbakidze]

Ankhena, это как

[Ankhena]

Elbakidze, delete? :)

Вы задаете фикс высоту блоку. На какой-то ширине экрана содержимое перестает помещаться и вываливается из блока. И обрезается overflow.
Уберете overflow и поменяется цвет шрифта (иначе будет белый на белом)- увидите.