Посмотрите, как я исправляю глупую ошибку CSS на своем собственном сайте WordPress.

Исправление глупого CSS-бага на моём собственном WordPress-сайте (Lando + Git + отладка VS Code в режиме реального времени!)

Жена прервала первый дубль, чтобы купить мне кофе — оно того стоило. Дубль второй: Обнаружил глупый баг с изображением на сайте, который давно не трогал. Изображения героев не заполняют контейнеры на мобильных устройствах… и это полностью моя вина.

Смотрите:
Клонирование с GitHub
Развертывание Lando (локальная разработка на Docker) с нуля
Исправьте баг несколькими строками SCSS
Забыл установить npm → паника → исправление → смех
Выложить в онлайн с помощью моего собственного плагина GitHub pull (без FTP!)
Объясните object-fit: cover vs contain с помощью живых демонстраций

Ошибка:
У элемента picture был object-fit: cover… но у img внутри — нет → пробелы, растяжение, хаос при изменении размера.

Исправление:
Добавьте к изображению ширину 100%, высоту 100% и object-fit: cover. Готово.

Дополнительный экспресс-курс: Почему object-fit: cover — ваш лучший друг (в 99% случаев)
cover = заполнение пространства, обрезка краев
contain = отображение полного изображения, добавление почтового ящика
Больше никаких растянутых, деформированных изображений

Использованные инструменты: Lando (локальный WP на Docker)
VS Code (с пугающим автодополнением, читающим мысли)
Git + GitHub (без веток, жизнь опасна)
SCSS → npm build
Специальный плагин Git pull (развёртывание в один клик)

Совет: Я больше не создаю такие сайты — я использую Etch (это как Dreamweaver для WordPress). Без терминала. Никаких подобных ошибок.

Временные метки:
0:10 – Перерыв на кофе и выявление ошибки
1:30 – Клонирование с GitHub
2:40 – Lando init (магия Docker)
5:20 – VS Code находит отсутствующий CSS
7:50 – Быстрое решение + тестирование в реальном времени
9:25 – Push в реальном времени… затем не забудьте о сборке SCSS
11:10 – object-fit: cover vs contain (наглядная демонстрация)
13:40 – Почему я отказался от этого рабочего процесса для Etch. Новичок в разработке? Вы увидите настоящий Git, локальную настройку и важность object-fit.

Вы ветеран веб-разработки? Посмейтесь над моими ошибками новичка на моём собственном сайте.

Оставьте комментарий: Вы когда-нибудь отправляли такой глупый баг? Какой ваш основной инструмент локальной разработки — Lando, Local, Docker или что-то ещё?

#wordpresstraining #WebDev #CSS #Lando #Git #VSCode #ObjectFit #Debugging

Ищете услуги веб-разработки или брендинга? https://apexbranding.design

Интересует Etch? Загляните: https://etchwp.com?aff=43a07932 (партнёрская ссылка)

Интересует автоматический CSS? Загляните: https://automaticcss.com/ref/2441/ (партнёрская ссылка)