Как писать стили под все типы устройств (по высоте)?

stanislavkm,

к примеру есть два мобильных устройства с одной шириной, но абсолютно разной высотой. контент ведь будет выглядеть по разному (условно, на одном блок текста будет на 30% от экрана, на другом на 90)

Черт с ней с версткой.
Нарисуйте, пожалуйста, два макета, оба с шириной 360, один с высотой 400, другой 700 (высоту можете выбрать на ваш вкус). И сделайте так, чтобы выглядело одинаково.

Как в flexbox сделать карточки гибкими в row как в grid?

Пока не всё понятно.
Вы хотите, чтобы 4 карточки по 240 поместились в 960 и между ними еще должны быть отступы по 24px?

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

Ну да, на js существенно длиннее.

const modal = document.querySelector('.modal')
document.querySelector('button').addEventListener('click', () => {
  modal.classList.toggle('hidden');
  modal.scrollTop = modal.scrollHeight;
})

говорят, что не модно

Вообще-то вам говорили не про моду, а про целесообразность. В этом вопросе у jq нет преимущества.

Но самое главное, что в вопросе ванилька, а не jq. Так что спорить тут не о чем.

Как стилизовать неполный border?

serrrezhka, и как тенью от кнопки можно сделать рамку уголками у родителя?

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

Александр Цымбал,

Убедитесь, что у #messagelist включен вертикальный скролл в css: overflow-y: overlay;. Ankhena, пожалуйста, подскажите, моден ли данный способ включения прокрутки в 2022?

У свойства overflow-y нет значения overlay.
Так что вряд ли этот способ модный.

Да, это jQuery. Сейчас меня обвинит куратор тега CSS, что jQuery не модно в 2022?
В то время как jQuery используется в 2022 на 70% сайтов.

Ваш код короче чистого js на немножко символов, а тянет за собой библиотеку.
Но да, если на сайте уже подключен jq, то нет причин его не использовать.

Правда, зачем бы тогда спрашивающий писал на чистом js...

Как зафиксировать, чтобы header был вверху, а footer внизу?

Александр Цымбал, ещё есть sticky, который хотя бы решает проблему с неизвестной высотой.

Как зафиксировать, чтобы header был вверху, а footer внизу?

Александр Цымбал, полно статей про позиционирование, почитайте что делают fixed, absolute, про поток документа, слои, как браузер всё это рисует и перерисовывает при изменениях.
Ничего плохого в них нет, если использовать по назначению и когда нет других вариантов.
В вашем решении, нужно к этому ещё и js прикрутить, чтобы узнать высоту и передать её в отступы.

Как стилизовать неполный border?

Градиентами или border-image или просто фон или ещё что-нибудь

Как бордеры сделать до конца,как в самом левом блоке,чтобы у них у всех границы были одинаковы?

Антон Антон

А при печати вот что:

Так, погодите.
Если про pdf речь идет про обычную печать в pdf, то у вас проблемы не с флексами.
Потому что и гриды с флексы прекрасно понимаются.
И проблема у вас исключительно в том, чем вы печатаете pdf. Например, foxit или обычное "сохранить как pdf" прекрасно с этим справляется.

Как растянуть sidebar на высоту экрана без скрола?

height (или min-height) 100vh

VScode не отображает картинки. Как исправить?

Что не так сделано?

Ну, например, блок .bg пустой и с нулевым размером.
Или её режет CORS по какой-нибудь причине.

Без ссылки на сайт или песочницу с видимой проблемой можно долго играть в угадайку.

Как бордеры сделать до конца,как в самом левом блоке,чтобы у них у всех границы были одинаковы?

Не задавая высоту родителю и без JS с вашими условиями не получится. А на JS гуглите equalHeight.js или напишите самостоятельно.

Кстати, кроме флоатов, есть ещё инлайн-блоки. Всё таки попроще и не нужен clearfix.

(Но что-то мне кажется, что можно сменить ваш pdf генератор на что-то более адекватное, но тут я не мастер)

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

daneliyan, разбейте задачу на мелкие.

Например, такая логика (можете поменять на свою)
1. Выбрать элементы (на которые hover)
2. Написать цикл, в котором
3. повесить обработчики событий
4. Выбрать элемент, у которого нужно менять фон (или просто найти его по селектору или по родственным связям)
5. Сменить у найденного кастомное свойство.

По дороге придумать, где хранить значение этого кастомного. Например, в data-атрибуте элементов, на которые наведение.

Как сделать, чтобы элемент с классом circle переносился вместе с последним словом?

Поставьте неразрывный пробел:  

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

Вот сайт, на котором можно посмотреть анимацию, которую я хочу повторить.
https://outside.digital/

Там же, в инструментах разработчика, можно посмотреть как сделано у них.
И это не единственный вариант.

Какие проблемы у вас возникли со сменой цвета не очень понятно.
Картинку можно менять, например, в псевдоэлементе прибитом куда нужно с помощью absolute|fixed. Или менять фон у body (в сочетании с bg attachment)
Можно при наведении на слово менять класс всему блоку на JS. Классу прописывать картинку. Можно менять не класс, а инлайново менять значение кастомного свойства.

Текст выходит ра замки дива как исправить?

ehoboli, используйте word-break: break-word или word-break: break-all

Прошу прощения, сначала написала не то, о чем думала.

Текст выходит ра замки дива как исправить?

Уберите echo и сделайте песочницу с видимой проблемой на codepen.io, потом позовите.

Как зафиксировать, чтобы header был вверху, а footer внизу?

Александр Цымбал, Alexsey, а ведь 2022 год на дворе и давно придумали флексы и даже гриды, чтобы не страдать фиксами и расчетами паддингов... Хоть плачь
https://codepen.io/AnnaSummer/pen/gOvbEdB
Вам только чуть-чуть скорректировать и прокрутку добавить.

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

const sub_contacts = document.querySelector('header_sub_cms_contacts');

Потеряли точку.
header_sub_cms_contacts это класс, а не тег.
block тоже.

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

Bohdan Bilous, написала в ответы