Как сделать вертикальный стилизованный input[type=range]?

Либо покажите ваш вариант с transform: rotate и динамической высотой.

На JS получаете высоту и передаете её в кастомное --height и задаете эту высоту (ширину) инпуту.

p.s. jsfiddle не работает в России, так что если хотите, чтобы мы смотрели песочницу, то переделайте на codepen.io

Как сделать border-radius с :first-child правильно?

Что-то интересное вы рассказываете и пишете.

Сначала, что "первые 2 блока имеют класс .mode--pc".
А потом .block:not(.mode--pc):first-child хотите задать border-radius первому элементу, если он не mode--pc.
Но из первой фразы следует, что так не бывает, потому что первый всегда с этим классом.

Попробуйте описать задачу получше.

Как сделать, чтобы картинка не обрезалась?

frontAng, ну ок.
Нарисуйте что должно получиться.

Сейчас вы хотите, чтобы ширина осталась прежней (фиксированной), высота увеличилась,но при этом картинка не обрезалась.

Как нарисуете, позовите.

Как сделать, чтобы картинка не обрезалась?

frontAng,

проблема в том, что если написать height: 100

не пишите...

Не затемняется фото?

Не затемняется фото?

Неа, не затемняется.
И не затемнится.
Ведь сначала цвет, а поверх картинка.

Но вы можете использовать множественный фон и поверх поместить слой с градиентом из одинаковых цветов.
Альтернативы: псевдоэлементы, тени, фильтры

Как сделать, чтобы картинка не обрезалась?

Ну смотрите, вы написали что картинка должна быть иметь высоту 100% и обрезаться с помощью object-fit cover.

Если вам это поведение не нужно, то зачем пишете?

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

Евгений Полинов, поскольку вопрос сформулирован так, что вряд ли его кто-то с аналогичной проблемой сможет найти, то проще удалить вопрос.

Как адаптировать абсолютно позиционированные элементы?

Дмитрий Нефёдов,
типа того

left: calc(50% - 29px);
transform: translateX(-50%);

29px от балды

Ближайший аналог https://codepen.io/AnnaSummer/pen/QWQOvzy

Как адаптировать абсолютно позиционированные элементы?

Например, позиционировать от центра.

Есть тест, как у выбранной кнопки менять background-color?

Ростик Кальченко, даже так? Но не объяснять же взрослому человеку..

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

Владимир Овчинников, да, вот такая жизнь

Есть тест, как у выбранной кнопки менять background-color?

Что-то вы...
Хоть бы тегнули Фрогги

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

ок, гугл https://yandex.ru/search/?clid=9582&text=telegram+...

Как сделать вот такую вот фишку в верстке?

Я бы делала псевдоэлементами

Как сделать рабочий запрет переноса строки в table?

Валерий Суворов, td

Новичек и жестко нагородил с первой секцией. При уменьшении разрешения съезжает фон в левую сторону. Можно ли исправить не переписывая все?

Евгений Полинов, какой-то легкий бред.

Хорошо бы писать правильно слова container, title и другие, если собираетесь хоть кому-то показывать свой код.
Обычно в редакторе кода есть настройка отвечающая за проверку орфографии.

Как сделать рабочий запрет переноса строки в table?

Вы пытаетесь задать это строке..
Нужно обернуть текст в div и задать всё это ему вместе с шириной.

Как на кнопку выпадающего меню повесить ссылку?

marcys, считать клики. Если первый, то одно действие и прибавлять счетчик, если уже второй, то другое.

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

Как выровнять высоту блоков и прижать картинки вниз?

Что же вам не гуглится-то? Ведь каждый день такой вопрос.
Поможет: https://habr.com/ru/post/329820/

Из-за разной длины текста они выходят разной высоты.

Не выходят. Это страсть к лишним оберткам вводит вас в заблуждение.

Карточки у вас уже одной высоты. Потому что по умолчанию align-items имеет значение stretch, которое растягивает все дочерние флекс элементы на одну высоту в рамках строки. Обратите внимание на последний нюанс.
Чтобы вообще все карточки были одинаковой высоты, нужен либо грид либо js. Но обычно этого и не требуется.

Если вы обведете все practice-column рамочками, то убедитесь в этом.
А дальше все дочерние обертки растягиваете по высоте на высоту родителя. Последнему задаете флекс и раздвигаете его два дочерних элемента либо с помощью margin-top auto либо space-between.

Но всё это можно еще упростить, если ответить на вопрос, зачем вам столько оберток? Зачем нужен practice-column, если вся карточка обернута в ссылку? Зачем внутри ссылки ещё один div practice-item? Эта обертка practice-item-descr тоже не ясно с какой целью понадобилась. Но может там на макете какой-то фон отдельный.. Макета вы не показали.

Имеет смысл поступить так:
1. practice-body сделать списком, а не div.
2. practice-column - будет li. Все они окажутся одинаковой высоты в рамках строки.
3. Ссылку растянуть на всю высоту li и задать flex и ему column (хотя я бы предпочла гриды).
4. practice-item - убрать. Я не придумала, зачем он там может понадобиться.
5. Если в макете нет оснований для practice-item-descr, то тоже убрать.
6. А вот картинку имеет смысл оборачивать в div или figure, чтобы при адаптиве ничего никуда не уползло, для сохранения пропорций и т.д. (но это на ваше усмотрение)
7. Останется ссылка-флекс и в ней 3 дочерних элемента. Последнему задаете margin-top: auto.

Проблемы будут если захочется выравнивать и заголовок и текст. Тут два варианта: либо к тому времени когда захочется подтянется subgrid либо js.

Как отцентровать элемент?

<div class="line1"></div>
  <div class="line2"></div>
  <div class="circle"></div>

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