Что выше посоветовали с media - нужное свойство будет работать только в фаерфоксе https://developer.mozilla.org/en-US/docs/Web/CSS/:...
Лучше скажите зачем вам отменять ховер?
На тач устройствах срабатывает ховер при нажатии на кнопку только если не заданы стили для :active
Задайте стили для :active такие же как и для обычной кнопки, ну или стилизуйте как хотите.
Есть несколько вариантов - размеры кнопок не фиксированные, на телефоне другой шрифт - кнопки разъезжаются.
Либо кнопки инлайн-блоками сверстаны и им не сброшены font-size и line-height.
Ну и еще вариант, мелкий текст айфон увеличивает. Для этого задайте для body -webkit-text-size-adjust: 100%;
Я бы вставил через :after и абсолютно спозиционировал. А при фокусе прятал бы.
P.S. Хотя не, что-то погорячился. Плейсхолдер пропадает когда печатать начинаешь, а не при фокусе. Тогда javascript
320 пикселей это айфон 4, 5, на пример. Ну и многие андроид девайсы до 5 дюймов. Это без учета device-pixel-ratio, как уже отмечали. 360 пикселей у больших андроид смартфонов, на пример у галакси 7. Так что да, имеет смысл.
Предположу, что для .service-item нужно задать первоначальное значение свойства, которое собираетесь менять. То есть top: 0;
UPD: вот работающий пример codepen.io/Kublyakov/pen/BzyobP
Если правильно вас понял, то примерно такое вам нужно. codepen.io/Kublyakov/pen/KzmvVX
При наведении меняем цвет, и за счет transition цвет меняется не сразу, а постепенно, в моем случае в течение 0.5 секунд. Думаю, смысл понятен и сможете доработать для своих целей.
От 14 до 16 в зависимости от размера экрана. Просто вспомни сайт, на котором тебе размер шрифта удобен и на ПК и на телефоне и посмотри сколько пикселей у них шрифты)
jade-lang.com
Каждый блок - отдельный файл.
Допустим, файл header.jade - один для всех страниц, поменяв в тем текст на необходимый - он поменяется во всех страницах.
P.S. - Увидел, что в существующем коде замены нужно проводить. Тогда да, поиск с заменой.