Как закрасить символ на половину?

dimatim1516, C пикселями будет более предсказуемый результат. https://jsfiddle.net/ncy8bq3m/

Почему не меняется цвет footer и header?

Верстка на таблицах. Какая прелесть.
Цвет не меняется потому что в стилях идет обращение по классу, которого нет в html коде. Нужно добавить классы footer и header
https://jsfiddle.net/bhf87na1/

Как добавить прокрутку для таблиц для мобилок?

olya095, Значит нужно найти сайт с айфона, где подобное уже реализовано и работает и скопировать оттуда код. Советую начать с Bootstrap. Очень сомневаюсь, что там нет поддержки айфонов.

Как добавить прокрутку для таблиц для мобилок?

olya095, Значит проблема в других стилях.

overflow-x: auto; -webkit-overflow-scrolling: touch;

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

Как добавить прокрутку для таблиц для мобилок?

olya095, В вопросе было написано про айфон и мобилки. Значит там и нужно проверить. Браузер на ноутбуке не подходит для проверки.

Как добавить прокрутку для таблиц для мобилок?

olya095, Это было проверено на мобильных или просто открыто в браузере на компе?

Почему скрытые элеметны видно во время загрузки страницы?

Лев Александров, display none и нужен. Потом по клику добавляется класс, который display block добавит, потом setTimeout, потом класс который opacity 1 и visibility visible делает. Обычно так делают, но я в своих проектах не применял.

Почему скрытые элеметны видно во время загрузки страницы?

Лев Александров, Не слишком. Можно изучить, как на boostrap модальные окна сделаны. Там должно быть надежно и предсказуемо все.

Почему скрытые элеметны видно во время загрузки страницы?

Лев Александров, Трудно сказать. Я бы еще с z-index попробовал поиграться вместо pointer-events, svg убрать или вставить иным образом. Через спрайт, например.

Почему скрытые элеметны видно во время загрузки страницы?

Лев Александров, Покажите. И в данном примере, если убрать iframe без src проблема остается?

Почему скрытые элеметны видно во время загрузки страницы?

Скорее всего это из-за iframe c youtube, который есть на странице и которого нет в коде, который в вопросе.
data-src на src изменить и все будет нормально. src является обязательным атрибутом для iframe

Фото для полной карточки товара, как растянуть главную фотку по высоте блока с маленькими фото?

object-fit: cover c width: 100% и height: 100% весьма надежен. Можно смело пользоваться.

Как стилизировать полоску до ползунка?

Стандартный это системный элемент. Он не стилизуется.
Можно сделать полосу высотой с ползунок, а на фоне сделать изображение линии шириной как в макете. Визуально будет выглядеть, как в макете. И пробовать совмещать это все с box-shadow. Нужно экспериментировать.

Как стилизировать полоску до ползунка?

Полоска до ползунка делается с помощью box-shadow, которое гарантированно превышает размеры этого input и добавлением overflow: hidden; input, но тогда обрежется и сам ползунок, который выходит за пределы input.

input[type="range"] {
  width: 1000px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}
input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 3px;
  background-color: #f92b2b;
  border-radius: 10px;
  -webkit-appearance: none;
  margin-top: -10px;
  cursor: pointer;
  box-shadow: -1000px 0px 1px 1000px #f92b2b;
}

Как использовать функцию attr() внутри repeat()?

Использование переменных более оптимальное решение. Есть еще вариант тупо вставить правило в html style="grid-template-columns: repeat(3, 1fr);", но это на любителя.

Как реализовать такой эффект?

При чем тут тогда уменьшенная в несколько раз картинка? Или речь идет о маске на изображение? Если да, то это с помощью svg делается.
https://technoteinfo.ru/post/ispolzovaniye-masok-v...

Как в dropdown-menu перенести текст, который не помещается в максимальную ширину?

В данном случае не может. Поэтому в bootstrap и было предусмотрено переполнение текстом с помощью правила white-space: nowrap;

Как в dropdown-menu перенести текст, который не помещается в максимальную ширину?

В таких случаях обычно делают среднюю ширину dropdown, чтобы и с длинным и коротким текстом смотрелось нормально. Можно попробоваться задать ширину <p>, если этого тега нет в других dropdown

Как в dropdown-menu перенести текст, который не помещается в максимальную ширину?

Значит нужно max-width заменить на width и потом изменять его ширину медиа запросами, когда он не будет помещаться на мелких экранах, если я правильно понял написанное

Куда помещать html-окна?

Вероятно речь идёт о модальных окнах, попах.
Размещать их лучше перед закрывающимся body, если они статичные, типа регистрация/авторизация. И генерировать на лету, если их много, типа Быстрый просмотр в каталоге товаров.
Общих правил нет.