Rustam Bainazarov

Ну ОК, конечно, но:
1. Я не понимаю, почему надо везде использовать Bootstrap и страдать, когда что-то внезапно на нем не выходит.
2. Я не понимаю, почему нельзя посмотреть код того, как сделано это на самом сайте «Юлы».

А-ля так:

Смените сложность вопроса на «лёгкую», это базовые свойства CSS.

Если нужно фиксировать на экране, то position: fixed + viewport-единицы (можно тупо в процентах в данном случае, ибо позиционируем относительно окна):


Если без фиксации при прокрутке и внутри любого блока, то тут уже обязательно viewport-единицы, чтобы не зависеть от обёртки и брать размеры прямо у окна браузера:


Учтите, что viewport-единицы в мобильных браузерах (Chrome Android и iOS Safari) со схлопываемыми (косое слово, да) панелями учитывают размер окна без учёта этих панелей в раскрытом состоянии, поэтому они могут перекрывать этот блок, пока не будут скрыты/сжаты.

Компилирую ответ.

Это внутренний размер буквы. Прописано в шрифте при его разработке, это нормально.

Если так критично, то отрицательный margin с em вас спасёт:


Источник решения:
https://stackoverflow.com/questions/28809771/left-...

Ошибка указывает на то, что внутри тега label может только один button, input, meter, output, progress, select, или textarea (на выбор).

Вот так неверно:

<label>
  <input type="search" class="search-field" placeholder="Поиск по сайту..." value="" name="s">
  <button class="search-submit search__pos"><i class="fa fa-search"></i></button>
</label>

А вот так верно:

<label>
  <input type="search" class="search-field" placeholder="Поиск по сайту..." value="" name="s">
</label>
<button class="search-submit search__pos"><i class="fa fa-search"></i></button>

Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

UPDATE №1. Шрифт должен быть моноширинным.

UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

https://css-tricks.com/almanac/properties/o/oversc...

https://caniuse.com/#feat=css-overscroll-behavior

html, body {
    overscroll-behavior: none;
}

Будет работать только в современных браузерах. В Safari это не будет работать, к сожалению, там этот механизм не отключить.

Update. Убивает механизм «потянуть для обновления страницы» в Android Chrome.

А-ля и вуаля:


Поставьте вашу картинку нормальную и подгоните проценты позиционирования элементов.

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

Плюс, посмотрите на используемый хак для соотношения сторон более внимательно. У вас соотношение сторон стоит 16:9 в коде (56,25%), а у iPhone X — 18:9 (50%).

Если есть контент, который должен «плавать» внутри непосредственного родительского блока без сложной логики этого действия, то можно использовать position: sticky;. Но он поддерживается не всеми браузерами.

Для условной автоматизации этого дела есть хороший плагин https://dollarshaveclub.github.io/stickybits — там, где нет sticky, он сделает с помощью fixed и наоборот.

position: sticky; хорош тем, что он не добавляет никаких слушателей прокруток и т. п., что положительно сказывается на производительности страницы.

P. S. Но без JS не обойтись вовсе, если нужно добавить логику по типу «если плавающий элемент доходит до какого-то элемента внутри общего родительского блока, то сделать то-то, то-то».

Вот так нужно вам? Хак соотношения сторон. У вас тупо соотношение сторон не соблюдается, оттуда и полосы сверху (пустое пространство). Решение на CSS только такое есть.



Встраивается в разметку это дело довольно просто:


Можно что-то типа такого сделать, если заняться нечем, главное -- не управлять высотой родительского блока iframe'а, у которого этот хак используется :))

Можно для полного прикола вот так сделать:

Вообще, лучше это делать с помощью SVG.

Если нужно на CSS — то вот, но читай комментарии. Там ряд хаков используется. Сжимай окно по ширине, чтобы увидеть, что блоки текста сохраняют свои размеры и позиционирование относительно общего родителя:

Вызывайте иконку из внешнего файла спрайта на сервере:

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- путь до файла спрайта + ID нужной иконки в нем -->
    <use xlink:href=assets/sprite.svg#sprite-icon-1"></use>
</svg>

Безо всяких JS такого, как у вас толка. В DOM будет встроена только конкретно вызванная иконка из внешнего файла. При этом кеширование тоже будет работать.

Не работает из коробки в IE11 и ранних версиях EDGE, но для них есть полифил:
https://github.com/jonathantneal/svg4everybody

Проблема в CSS. Забавные конструкции типа not() тут не нужны, потому что у вас тупо исключается применение нужных стилей, если элемент либо активный, либо в фокусе. Не знаю, зачем это вообще, нужно так:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  opacity: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Вот пример, который можно открыть в IE11 в режиме чтения по ссылке для проверки:

Потому что внутри table браузер генерирует tbody, даже если вы его не прописали сами, поэтому так:
table > tbody > tr > td

Data-атрибуты -- тоже CSS-селекторы.

animation: grow 3s linear forwards;

Вы использовали значение infinite свойства animation-fill-mode. Неудивительно, что анимация постоянно повторялась.

Значение forwards зафиксирует анимацию в последнем её состоянии. Без бесконечных итераций.

Адаптивность тоже завёз. Выравнивание текста и счетчика будет по верхней границе блока на телефонах, потому что так правильнее, чем если бы они были по середине, как на полной.

Обёртка нужна ещё одна.

По этой ссылке есть мой ответ:
Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

P. S. При удалении контента — он удаляется из DOM, поэтому не может занимать место. Либо у вас контент не удаляется, либо вы использовали какие-то странные JS-решения для прижатия подвала.