Как скрывать текст в блоке не по словам, а по буквам?

у меня же в этом случае обрезается строка не по символам, а по словам.

По умолчанию она должна обрезаться по символам.

Так что приложите, пожалуйста, песочницу на codepen.io, чтобы было видно что вы такое там натворили.

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

godsplane,

вот код на оценку

Если клиента устраивает результат, то и славно.

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

godsplane, если хотите узнать новое, то вот тут есть о чем помечать https://github.com/w3c/csswg-drafts/issues/1026#is... ;) На данный момент, проблеме это, конечно, не поможет.

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

godsplane, там и нет ничего нового.
Разбить блок на равные ячейки наверняка умеете.
Внутрь вставить слайд абсолютом тоже умеете.
Кстати, можно и без абсолюта. Просто флексом и flex-shrink 0, чтобы слайд спокойно выпирал из родителя.

и как смещать блоки к верху от левого нижнего угла?

Я уже написала выше: варианта без js я не знаю.

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

godsplane, нет, по одной карточке в обертке.

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

godsplane, я аналогичное делала для ширины: флексами или гридами разбиваете на равные ячейки. В них абсолютом добавляете карточки.
JS нужен чтобы вычислить "выпираюший" кусок и сделать паддинг на его ширину.

Смещение по высоте - на js и передавать через кастомные.

Зачем второй одинаковый вопрос?

Как сделать ренж инпуты?

sw213, они что, не говорящие? Нельзя спросить и уточнить?

Тогда делайте на свое усмотрение, мы же тоже не угадаем, как оно там рассчитывается.

Цвет удобно делать через кастомные.

Как сделать ренж инпуты?

Не вижу тут инпутов. По-моему, это вообще вводи данных, а наоборот, их демонстрация.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Надо брать максимальное приходящее значение и все остальные данные с ним сравнивать?

Про это разумнее читать в ТЗ. Откуда берутся данные и какие значения максимальные.

Как сделать такой адаптив без js при помощи только css?

QnaTwitt,

Прикольно, я раньше не когда даже не использовал display: contents)

И не увлекайтесь.
Потому что при этом нарушается семантика.
Т.е. если был div, то ему нечего терять, а вот спискам, секциям, строкам таблиц и т.д. - есть.

Как сделать такой адаптив без js при помощи только css?

Либо, по-простому, гридами либо флексом с доп обертками и display:contents

Почему один section находится под другим section?

Илья Атабеков,

Вместо section сделал div. Но всё равно один section под другим

Да. Им так и положено.

Если вы хотите, чтобы они шли в строку, то нужно изучить как работают флексы и гриды.

Как ограничение высоты изображения на разных ширинах контейнера?

Вопрос в чем: есть ли какой-то способ чтобы не прописывать по 5 медиа-запросов?

Я не поняла, зачем 5 media.
Вы же не меняете пропорции картинок на разных вьюпортах? Или меняете?

Если пропорции одинаковые, то один раз написал и хватит.
aspect-ratio или хак с паддингом (при поддержке гридов хак с паддингом стал удобнее, чем без гридов)

Какое решение выбрать, чтобы можно было создать структуру организации и поддерживать её?

alexandrsemen4ukk,

По сути должна быть публичная страница

Чем не подходит обычная разметка.
Ладно бы вы хотели многостраничный каталог.

<ul>
  <li>
    <h2>Отдел 1</h2>
    <dl>
      <dt>Руководитель</dt>
      <dd>Петров</dd>
      <dt>Телефоны</dt>
      <dd>123</dd>
      <dd>345</dd>
    </dl>
  </li>
  <li>
    <h2>Отдел 2</h2>
    <dl>
      <dt>Руководитель</dt>
      <dd>Сидоров</dd>
      <dt>Телефоны</dt>
      <dd>122</dd>
      <dd>333</dd>
    </dl>
  </li>
</ul>

Альтернативой может быть Notion

Почему не работает обновленный код после первого коммита?

Obemygve,

но он продолжал работать на стадии первого коммита

Имеет смысл работать с открытыми инструментами разработки и вот этой галочкой.

Почему не работает обновленный код после первого коммита?

Obemygve, не видя весь ваш код целиком ничего более умного вам не сказать.
Как вам выше сказал Сергей, открывайте инструменты разработчика и смотрите что там случилось со стилями.

Если никак, то публикуйте ссылку или код в песочницу на codepen.io

значение атрибутов в селектор

В CSS нет атрибутов. Есть свойства и их значения.

Почему не работает обновленный код после первого коммита?

Ваш вопрос к гиту не имеет отношения.
А вот ошибки в стилях или разметке ищите.

1. Зачем вы одному селектору задаете сначала белый фон, а потом там же черный?
Какие еще стили применены к этому тегу?

2. Шрифты с гугла лучше подключать одной общей ссылкой, а не по одной на каждый.

Так же впервые вижу подчеркивания в Visual Studio Code, в виде зеленого или красного цвета. С чем все это может быть связано?

С ошибками.
Вероятно, если навести мышку, то покажут в чем дело, если не догадаться самостоятельно.

Как подставить данные из массива в Input в зависимости от выбранного Select?

Можно создать словарик соответствия value и price.

Или можно указать цены в data-атрибутах и передавать в инпут значение.

p.s. id="price" это точно инпут, а не output?

Почему один section находится под другим section?

В вашем коде всего один section.

Но вообще, каждый section начинается с новой строки, потому что так ведут себя обычные блочные элементы.

А почему вы считаете, что так быть не должно? Да еще и не приложив стили вообще.

А лучше сделайте песочницу на codpen.io с видимой проблемой.

Почему не срабатывает медиа правила для блока?

Нет смысла повышать специфичность.
Достаточно равной и правильного порядка подключения @media.

Если на каждом шаге повышать, то до !important дело и в правду дойдет довольно быстро.

Как выровнять label по нижнему краю в BOOTSTRAP5?

Например, задать align-self: flex-end для form-group и флекс для родителя.
Или флекс для родителя и align-items: flex-end.
При равной высоте инпутов это даст аналогичный результат.

Как это написать на бутстрапе прочитайте в документации самостоятельно.