Изменение значения gap в зависимости от ширины экрана (адаптив) через миксины?

Почитайте про clamp https://developer.mozilla.org/ru/docs/Web/CSS/clamp
К этому миксину не имеет отношения, но вам понравится.

Почему не работают падинги?

Mark321, обычно ставят многотичие с помощью text-overflow ellipsis или js'ом или прилетает с бэка.
Хорошо бы ещё пользователю намекнуть, что нужно сделать, чтобы увидеть остальной текст.
Причем, не забыть пользователей без мышки и читалки.

Почему не работает inline-block?

Front-Den, пользуйтесь валидатором https://validator.w3.org/nu/
Почините разметку, всё получится.

В современном мире блоки выстраивают с помощью флексов и гридов.
Конечно, обязательно нужно научится делать это и инлайн-блоками и всеми другими способами, чтобы понимать что происходит.

Это .promo .promo_text избыточные селекторы. Достаточно просто .promo_text.
И в аналогичных случаях.

<div class="waiting_divider"></div> если вам хочется вставить пустой тег в разметку, то с очень большой вероятностью, вы делаете что-то не то. Если так поступает автор курсов, то вы точно делаете что-то не то.

Почему-то я думаю, что вы смотрите не совсем свежие и не вполне качественные (судя по селекторам и дивайдерам) курсы.

Почему не работают падинги?

Mark321, чтобы обрезался, нужно использовать overflow: hidden.
Чтобы остались отступы, нужна доп обертка или имитация отступов с помощью, например, бордеров.

Почему не работают падинги?

А куда должен деваться текст, который не поместился в ваши 112px?

как это исправить, подскажите пожалуйста

Убрать ограничение по высоте.

Как сделать чтобы при нажатии на h3 копировался текст?

Так

Как узнать о переполнении?

Дмитрий, не усугубляйте ))

И давайте так: вы расскажете всю задачу и мы попробуем помочь вам найти к ней то самое изящное или признаем, что кроме банального сравнения размеров делу не помочь :)

Что делать с таким фоном?

IIIu6ko, так и делать. Взять картинку, поверх наделать градиентов.
Можно собрать все кругляхи в одну SVG, но если там много блюра, то браузер может быть недоволен.

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

Как узнать о переполнении?

Дмитрий, да вы не огрызайтесь. Никто же не запрещает использовать костылики. Все время от времени городят черти что в коде.

Но возможно есть и более изящные и быстрые способы...

Особенно, если эти костылики кажутся вам изящными.

Простите, хотела удержаться, но не смогла :)

Как узнать о переполнении?

Дмитрий,

найдя этот пример, я просто собирался прочитать у родителя свойство bg (ну или другое) через getComputedStyle

знатный костыль

Как узнать о переполнении?

Дмитрий,

какое это имеет значение?

На этом сервисе полно спрашивающих не в состоянии идентифицировать проблему. Т.е. им кажется, что они не могут справится с какой-то проблемой. А на самом деле, этой проблемы не было бы вовсе начни они решать задачу другим способом. В вашем случае это могла бы быть задача многострочного text-overflow ellipsis или просто overflow или что-то аналогичное.

Ваша проблема решается на js путем сравнения двух (или четырех, в зависимости от верстки) размеров.
Либо с помощью IntersectionObserver (подходит ли для вашей задачи тоже зависит от верстки) https://habr.com/ru/post/494670/

Как при наведении курсором на изменять цвет сразу у двух?

newokek, удачи в изучении :)
Не забывайте про семантику и доступность.

Как узнать о переполнении?

Существует ли лаконичный способ идентифицировать переполнение блока содержимым?

Смотря зачем

Как прописать значения для .container,чтобы все правильно отображалось на больших экранах тоже?

Ну а как это будет отображаться на Full HD или 4K?

Самое разумное спросить у дизайнера или заказчика.
Часто просто текстовый вопрос не приносит результата, поэтому имеет смысл показать пару картинок.

Просто хочу узнать как верно сделать.

Универсального ответа не существует.
Какие-то дизайны рассчитаны, чтобы растянуться/масштабироваться/адаптироваться на 8к, а каким-то это противопоказано.

max-width: calc(1320px - (40px * 2));

Если это не кастомные свойства, то лучше поставить уже посчитанный размер, а не заставлять браузер считать это каждый раз. А в комментарии написать как это значение получилось.

Как выровнять список ul относительно маркеров ("::before")?

Corepro, псевдоэлементы по умолчанию имеют display: inline, а значит у них не работают размеры и горизонтальные отступы. Вертикальные margin тоже не работают, а padding работает не так, как в основном ожидают люди.

Позиционировать их можно как inline-block, абсолютами, флексами или гридами.

При использовании флексов или гридов, нужно либо оборачивать контент в дополнительную обертку либо точно быть уверенным, что в тексте нет и не будет никаких тегов (типа br, span, strong и т.д.)

Удобнее манипулировать положением и размерами галки, если она будет фоном, а не написана в content.
А content оставить пустым. content: ""

---
Не очень четко описано, какого эффекта нужно добиться. Чтобы было как на скрине или чтобы текст шел по красной линии?

Не работают отступы у кнопок на IOS браузерах. В чём можеть быть дело?

Проверила на 15 - работает.
Может, кеш?

Но в любом случае:
- Невалидный код может работать как угодно, даже если невалидные куски не касаются напрямую проблемного места.
- Кнопки удобнее делать тегом <button>. Input - устаревший вариант и не так удобно стилизуется. В сафари может иметь сложности с line-height.

Стилизация списка li?

Corepro,

я не понимаю как вставить ровную галочку

Ровная галочка вынимается из вашего макета в формате SVG и вставляется фоном в псевдоэлемент.

сделать background белыйл.

эммм... так и сделать
background-color: white
для того же псевдоэлемента.

Если совсем беда, экспортируйте из макета вместе с кругляхом.

Возможно ли реализовать такую сетку grid?

ForSureN1, почему это неправильно?
Первый большой блок - первый из десяти, 10n-9
Второй - восьмой из десяти, 10n - 2

Ну или в плюс

Возможно ли реализовать такую сетку grid?

Возможно ли реализовать такую сетку grid?

Конечно.

Получается только вот такое

Потому что в последовательности в образце 10 элементов, а вы пляшете от 7n

Как сделать фильтр товаров с помощью javascript?

и у каждого блока можно добавить любой атрибут со значением

Вот и добавляйте им data- атрибуты с указанием категории.

как сделать фильтр товаров через чекбокс, чтобы можно было выбрать несколько вариантов:

Чекбоксы как раз и позволяют выбирать несколько вариантов.

Дальше на js сравниваете атрибуты у чекбокса и ссылок.

В теории можно и на CSS с помощью соседних селекторов и селекторов по атрибутам нагородить огород. Но это плохо масштабируемый вариант.