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

Часто вижу такое:

.button {
  width: 200px;
  height: 50px;
}

❌ Проблема в том, что такие кнопки «ломаются» при адаптиве — текст не влезает, ширина не подстраивается под экран.

✅ Лучше так:

.button {
  padding: 12px 24px;
  display: inline-block;
}

Теперь размер зависит от контента, а не от фиксированных значений.
А если хочешь добавить гибкости — используй min-width или max-width, чтобы задать границы:

.button {
  padding: 12px 24px;
  min-width: 150px;
  max-width: 100%;
}

💡 Мой совет: всегда думай, нужно ли фиксировать размер, или можно доверить это контенту и адаптивности. В 80% случаев фиксированные размеры — зло 😄

👉@frontend_sovet