four-card

П'ята домашка, тест readme

Де виникли проблеми:

Висота карти в Desktop-версії. По макет було задано висоту 250пх, в мене вийшло 240пх

• img задати вище margin-top на 10пх. Хоч і по макету задано 40пх але ж хто помітить хиии
• трошки підняти падінги самій карточці але вже буде більш палевно

Інформація в четветрой картці

Якщо в перших трьох картках текст такий самий, як в мобайл і десктоп, то в четвертой слово "provide" переноситься на другий рядок в мобайл. Мої варіанти рішення:

• зробити окремий клас для тексту в четвертій картці. Проблему вирішити зможемо, але це більше коду для такої маленької проблемки

Мобайфл-ферст/readme

Мої варіанти рішення:

• Більше практики :>

На що зауважити в майбутньому:

margin-inline: auto;

Не обов'язково усюди піхати

margin: 0 auto;

.card__body > .subtitle {
  padding: 1px 0 0 1px;
  text-align: start;
  font-size: 13px;
}

Раніше в описі проекту я випадково назвав код .card__body > .subtitle вкладеністю. Мене виправили, і тепер я розібрався, як це називається правильно.

У чому різниця: Конструкція з символом > — це насправді селектор із комбінатором дочірнього елемента. Він вибирає тільки ті елементи .subtitle, які лежать безпосередньо всередині .card__body на першому рівні (тобто є прямими нащадками, а не внуками чи правнуками).

• Комбінатор > — це класичний синтаксис CSS, який просто вказує на зв'язок між тегами в структурі сторінки.
• Вкладеність (CSS Nesting) — це зовсім інша фішка, коли ти пишеш стилі фізично всередині фігурних дужок іншого блоку через символ &.

Приклад для порівняння, щоб більше не плутати:

/* 1. Селектор із комбінатором: */
.card__body > .subtitle { 
  font-size: 13px; 
}

/* 2. Справжня нативна вкладеність: */
.card__body {
  & > .subtitle { 
    font-size: 13px; 
  }
}

Це все!