Див занимает слишком много блочного места, как сделать, чтобы занимал ровно столько сколько содержимого?

Пробовал указать для cards inline-flex, все равно занимает столько же блочного места.

Ну логично. Ведь он дочерний элемент другого флекса. А дети флекса не могут быть инлайновыми, они всегда блочные. Можно открыть девтулзы и убедиться в этом.

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

По поводу ширины можно взять и открыть справочник, например, MDN и посмотреть какие там вообще есть значения и нет ли среди них подходящих.

Вы, конечно, не показали макет, но, скорее всего вам гораздо лучше подойдут гриды и что-то типа grid-template-columns: repeat(3, 1fr). Либо вариации с min-content или min-max.

p.s. бардак с отступами тоже хорошо бы решить. У блока seo марджин слева. У ИванИваныча такой же справа. И всё это вместо одного общего паддинга всей карточке.

Как уменьшить расстояние между абзацами для мобильной версии?

Игорь Емельянов, во-первых, там и на десктопе даром не нужно этому блоку задавать фикс высоту 717.
Во-вторых, судя по коду, вы умеете использовать @media. Вот и пишите разные стили для разных вьюпортов.

С шириной на мобилках, кстати, тоже проблемы.

Сделайте нормальную сетку гридом, перестраивайте на разных вьюпортах и все проблемы уйдут.

Как уменьшить расстояние между абзацами для мобильной версии?

Кто-то написал вот это height: 717px;.
Фиксированная в px высота в верстке для блоков с контентом применяется очень редко.

Очень странно смотрится блок right-column, который находится под left-column. Старайтесь задавать названия по смыслу, а не по цвету или положению.

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

DZHAMBUALT, очень старая песочница из аналогичного вопроса, разбирайтесь, переделывайте под себя.
https://jsfiddle.net/Ankhena/qcvyn5ag/

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

Не понятно в чем проблема, почему вы не можете задать дочерним черные бордеры/тени?

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks,

с чего вы взяли что делая макет 1440, а не 1920 = не качество ?

Медленно: качественный дизайн тот, в котором продумано отображение на разных размерах вьюпортов и эта информация донесена до верстальщика. А не только 1440 или только 1920.

Если я куплю монитор, буду профи ?)

Вряд ли.
Извините. Вы сами напросились. Я честно старалась избежать этого.

фак логик

Теперь уж действительно :)

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks,

о чём вообще можно с вами спорить, если у вас у обоих акцент на верстку,

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

Вообще вы как из олдов должны больше всех понимать что раньше так и верстали, без доп монитора. В 2 направления, вверх и в низ, да даже и сейчас так верстают, вы что думаете я один такой перец ? не смешите

Всё верно. И с "каким есть" моником и из картинок в jpg и из сомнительных psd. Так у нас и не возникает вопроса, как имея 1600 верстать на 1920+. И для этого не нужно просить рисовать убогий дизайн.

нахер он мне сдался если я регулярно ей не занимаюсь

Разумеется. Поэтому и не понятно почему вы решили так яростно участвовать в этой теме и отстаивать позицию непрофессионала.
Собственно, поэтому прекратим эту дискуссию. Думаю, ТС уже и так хватит сказанного для выводов.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks, угу и повезло плиточнику, у которого есть плиткорез. А иначе будем класть только целыми. Или наломаем как получится.

делать 1920 потому что у како-то конкретного верстальщика моник 1920 ?

Да наплевать какой моник у верстальщика. Хоть вообще без него, вслепую.

если у вас там бывает так что делают аж 5-6 размеров

Качественные дизайнеры да, делают именно так.
А тема как раз об этом.

поверьте вам крупно повезло

Верю. Только к везению это не имеет никакого отношения.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

szQocks, не делать 1920 потому что у какого-то конкретного верстальщика моник 1600?
Т.е. разрабатывать дизайн исходя не из целевой аудитории, а моника верстальщика?
Сильная логика. Вы чего?
Ладно бы ещё исходя из характеристик устройства клиента, ведь это он деньги платит и заказывает музыку.

Но даже если у верстальщика есть 1920, то он всё равно должен верстать так, чтобы и стареньких смартфонах в 300px и на 4к и на 8к всё выглядело нормально. Правда, и дизайнер должен постараться учесть разнообразные размеры вьюпортов.

Современные качественные дизайнеры рисуют по 5-6 размеров.

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

Конечно, мы сверстаем всё, что вы нарисуете или скорректируем так, чтобы выглядело прилично.
Но сразу вам спасибо за то, что думаете о том, как сделать комфортнее.

Можете посоветовать ресурсы, видео и/или статьи, где мой вопрос описан максимально подробно и по делу?

Я частенько за завтраком слушаю разные дизайнерские блоги. В частности, Алексея Бычкова, у него специфическая манера изложения, кому-то нравится, кому-то нет. Но мне нравится смысл его речей и забота о том, чтобы верстальщик не проклял дизайнера. И это как бальзам на мою душу верстальщицы.
https://vk.com/alexeybychkov
Попадется кто-то ещё с аналогичными материалами, поделитесь, пожалуйста.

Понимать возможные размеры экранов

Тут всё просто с ответом: любые :)
Но это не просто для дизайнера.
Раньше рисовали либо десктоп либо три размера.
Но между 320 и 768 или 768 и 1440 (не говоря уж про 1920) огромная пропасть и куча блоков там не смотрятся. И выходит, что вы отдаете отображение на этих промежутках на волю верстальщику. Хорошо, если у него есть вменяемое чувство прекрасного.
Поэтому сейчас рисуют по 5-6 размеров.
При этом делают это так, чтобы верстальщику было понятно что делать и дальше, на 1920+. Куда тянуть фоны и где и из чего их раздобывать.

Макеты одной страницы на разной ширине должны быть рядом, а не на разных страницах Фигмы. Даже если во время рисования было удобно все десктопы нарисовать в одном месте, все мобилки в другом.

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

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

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

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

И ещё куча нюансов, про которые прямо сейчас не вспомнились или кажутся совсем банальными.

Почему html,vs code.в текстовом файле открывается весь набранный код?

1.1 Включите отображение зарегистрированных типов файлов в винде.
1.2. Создавайте файлы прямо в VS Code. Это и быстрее и .txt не вылезет. Хотя внимательность в любом случае нельзя выключать.

2. Установите Live Server для VS Code и запускайте через него.
https://marketplace.visualstudio.com/items?itemNam...
Есть некоторые вещи даже в статических сайтах, которые не будут работать без сервера. Например, маски или SVG спрайты.
Кроме того, лайв сервер будет обновлять страницу в браузере при сохранении кода в редакторе. (Только не включайте автосохранение)

Как показать взаимосвязь полей формы?

Сергей, я бы сменила теги вопроса на Дизайн. Причем тут CSS и HTML? У вас же не с ними проблема.

Как добиться срабатывания transition для checkbox?

Если что, радио и чекбоксы можно стилизовать напрямую. А также их псевдоэлементы. Если добавить appearance: none

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

А что мне делать если вы не говорите как это сделать.

Можно пойти на фриланс. Ведь у вас, я так понимаю это задание по работе.

Но в любом случае, придется начать с того, чтобы найти и убрать противоречие в этой фразе:

код который расширит красный див на всю высоту body, розовый див растягивает body больше вьюпорта а красный див не растягивается на всю высоту розового дива и body.

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

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

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

Но и учитывайте, что сейчас ночь между двумя выходными.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

Можете дать код который...

Это на фриланс.

Просто очень срочно надо но ничего не получается

Тем более на фриланс

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT, возможно, имеет смысл осознать разницу между height и min-height.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,

Мне надо растянуть красный div на всю высоту скролла body

Сейчас так и есть. Body на высоту вьюпорта и красный блок на всю высоту body и, соответственно, равен вьюпорту.

Это сделано для того чтобы в ios не было сильного скролла за пределлы бавузера

И как оно? Помогло?
Это решается либо нормальной версткой либо overflow на ближайшем родителе с подходящей шириной.

Как растянуть элемент на всю высоту скролла body?

DZHAMBUALT,
Хорошо сформулированный вопрос залог успеха. Пока не понятно, какой блок куда не растягивается. Вы сказали, что body 100vh и соответственно, красный блок тоже. Первый div 150vh. В браузере так и вижу. Что именно не так?

А вешать overflow на body, во-первых, дурной тон, во-вторых, на мобилках по крайней мере в части браузеров не сработает.

Как исправить эффект при наведении?

MaxKeany, разбейте фон на две части. Вокруг инаута и лейбла.

Как исправить эффект при наведении?

MaxKeany, а и правильно, зачем всю информацию сразу выдавать? Пусть они тратят время на первую часть, а потом будем вносить уточнения.