Александр Цымбал

Ответ найден. Обязательно должно быть видимое поле (не type='hidden') с введенным логином. Его можно запретить к редактированию с помощью атрибута readonly, а также "спрятать" с помощью css.
HTML:

<input type="text" name="login" value="[ТЕКУЩИЙ_ЛОГИН]" class="no_need_to_show" readonly>

CSS:

.no_need_to_show {
    position: fixed;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0.01;
    pointer-events: none;
    /* еще можно отрицательный z-index, прозрачный background и т.д. */
}

Это даже багом браузера назвать нельзя. Такая особенность.
Если коротко, то проблема в том, что не проставлен метатег viewport, а у ссылок не задан font-size (Хотя бы относительный, в em или rem).
Страница считается не mobile-friendly. Браузер в таких случаях может увеличить размер шрифта, чтобы было его удобнее читать. Но размеры отступов (у вас это 2em) браузер не пересчитывает и получается, что размер шрифта вроде нормальный, а размер отступов - уменьшенный (на самом деле, размер отступов нормальный, а размер шрифта - увеличенный - для удобства).
После того, как вы взаимодействовали с элементом (ссылкой в вашем случае), производится его перерисовка, браузер понимает, что страница смотрится хорошо с текущим размером шрифта и устанавливает уже реальные отступы.
На скриншоте ниже видно, что у нижних двух ссылок (я с ними взаимодействовал) отступ margin гораздо больше, чем у первых двух.
Если сложно понять, то просто поставьте у body в стилях font-size и всё должно встать на свои места. :)

Привет.

Не слушайте про то, что большая конкуренция на рынке и высокие требования к спецам. Главное требование заказчика - опыт и ответственность, на чём бы вы ни специализировались - php или java или даже самая банальная html-верстка.
Все работодатели говорят разом о том, что у них дефицит it-специалистов по всем направлениям. Но из-за сложившейся сегодня ситуации, когда каждый второй студент-медик знает, как делать лендинги, найти толковых спецов становится всё сложнее.
Мой вам совет. Поработайте пару лет по специальности, не напрягаясь, берите на фрилансе заказы по вашему профилю. Потом попробуйте устроиться в другую компанию (в которой вас будут уважать), но на более выгодных для вас условиях - ведь опыта и компетенций у вас будет гораздо больше, чем сейчас - хотите вы этого или нет! :) Вас оязательно возьмут - ведь у вас будет портфолио и опыт. Работа сама вас найдёт, если вы посвятите себя любимому делу - java/php/python/html-css/js/hardware - ВСЁ ЭТО ОЧЕНЬ ВОСТРЕБОВАНО. Может быть не конкретно в вашем городе, но в целом в русскоговорящем мире - ТОЧНО ДА!
Удачи!

У обертки текста, который перекрывает иконку, нужно добавить CSS свойство pointer-events: none; - это правило нужно в ситуациях, когда какой-то элемент должен присутствовать на странице, но события мышки (наведение, нажатия) проходили его насквозь, до слоя, находящегося под ним.

https://jsfiddle.net/yu5dat2L/1/ - в этом случае добавил pointer-events к селекторам .thumbs:before (градиентная черная плашка) и .thumbs .caption (текст поверх).

1. проверьте, стоит ли у вас в браузере масштаб 100% (если нет, то установите на 100%)
2. проверьте, используете ли вы свойства трансформации css (даже у родительских элементов) - имеется в виду transform: ... (если да, то пробуйте обойтись без них)
3. проверьте изображения, может быть они так "нарезаны", что по краям появились полосы. (если полосы есть, то обрежьте картинки заново)
4. проверьте, используются ли изображения в 100% масштабе. Судя по css, который вы привели в качестве примера, вы используете относительное расположение бэкграундных картинок (75%). Проверьте, какое число получается в вычесленных стилях (computed styles), если дробное - то, вполне возможно, эти доли пикселя и создают такое чудо.
...если ничто из вышеперечисленного вас не касается, то...
4. у хрома достаточно кондовый графический движок: он съедает пиксели у мелких svg-иконок, округляет дробные значения, и т.д. Всё ради быстроты отрисовки - поэтому некоторые и называют хром самым быстрым браузером (новый firefox объективно быстрее). Но когда-то благодаря такому подходу хром и получил большую популярность (еще благодаря беспощадному маркетингу google). Пробуйте отказаться от текущего подхода, смотрите в сторону использования не растровых картинок, в svg, или банально блоков с css трансформациями.

У вас в main.js есть скрипт, который при ширине экрана 1185px и выше немного меняет верстку (добавляет svg и т.д.). А в CSS-файле правила для этих элементов срабатывают только при ширине экрана 1200px и выше. Поэтому решения 2:
1. в css-файле заменить участки кода вида:

@media (min-width: 1200px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

на

@media (min-width: 1185px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

(для остальных неправильно работающих элементов тоже нужно заменить значение min-width с 1200 на 1185)

2. в js-файле main.js (что лежит в шаблоне) найти и заменить совпадение "1185" на "1200". Но это более костыльный вариант, т.к. с этим значением работает целый плагин.

Изобретать велосипед не надо!
kenwheeler.github.io/slick + jquery - И забудьте о подобных вопросах.
jquery вы в любом случае подключите. Не сегодня так завтра. Всё и все работают на нем.