Задание: Адаптация сайта WordPress для смартфонов и планшетов (Дистанционная работа)
Сделать сайт удобным на всех устройствах (смартфоны, планшеты, крупные экраны) и увеличить моб‑конверсию.
Исходные данные
• CMS: WordPress + WooCommerce 8.x
• Конструктор: WPBakery Page Builder 7.x
• Страницы в работе: Все страницы
Адаптивные брейк‑пойнты и сетка
Диапазон Брейк‑поинт Сетка каталога/листингов
Смартфон 0‑480 px 2 колонки (текущий 1 → исправить)
Малый планшет 481‑767 px 3 колонки
Планшет / лэптоп 768‑1023 px 4 колонки
Десктоп ≥1024 px Текущая верстка без изменений
CSS‑grid пример (внедрить в style.css дочерней темы):
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 8px}
@media(min-width:481px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.products-grid{grid-template-columns:repeat(4,1fr)}}
Блок‑задачи (по секциям)
1. Header
• Оставить логотип, гамбургер, корзину; скрыть второстепенные иконки <375 px.
• Гамбургер открывает off‑canvas меню (90 % ширины, 100 vh).
2. Hero‑баннер
• Высота 75 vh, background-size:cover.
• Заголовок 24 px min / 7.5 vw; кнопка 14 px, padding 10×24 px.
3. Каталог «Образ для любого повода»
• Перевести на grid (см. пункт 3).
• Карточки aspect-ratio:3/4; в 0‑360 px скрывать рейтинг/длинные подписи.
4. Секции «Вам может понравиться», «Элегантность в деталях», «Услуги»
• Унифицировать высоту превью: 200–260 px.
• На мобайле блок услуг выводить в две колонки (50 %).
5. FAQ + Абонемент
• Текст FAQ max-width:38rem; кнопка 14 px.
• Абонемент в слайдер (Swiper.js) — 1 карт‑на‑моб, 2 — планшет.
6. Отзывы — slick/Swiper с авто‑высотой 220 px.
7. Футер
• Сетка 2×2 (иконка + текст). Шрифт 14 px, gap 6 px.
Оптимизация
• Lazy‑loading картинок, конвертация в WebP (Imagify).
• Отложенная загрузка WPBakery inline‑script (defer).
• Локальные web‑шрифты display:swap (Playfair + Montserrat).
Acceptance Criteria
• Нет горизонтального скролла на всех брейк‑пойнтах.
• Core Web Vitals (mobile): LCP ≤2.5 s, CLS ≤0.1, INP ≤200 ms.
• Lighthouse Accessibility ≥90.
• Тест — BrowserStack: iPhone SE, iPhone 14 Pro Max, Galaxy S22, iPad Mini, iPad Pro 11.
