«Вёрстка поехала» - это когда блоки сайта наезжают друг на друга, текст вылезает за границы, а колонки складываются в кашу. Причина всегда в одном из трёх: изменился HTML (правка контента, незакрытый тег), изменился CSS (правка стилей, обновление шаблона или модуля) либо браузер держит устаревший файл стилей в кэше. Начните с простого: обновите страницу с очисткой кэша (Ctrl+F5) и откройте сайт в режиме инкогнито - если дизайн ожил, виноват был кэш.

Сломано у всех или только у вас? Проверьте страницу в другом браузере и на телефоне. Выглядит одинаково плохо везде - причина в коде сайта. Ломается только в одном браузере - ищите конфликт с конкретным движком, расширением или устаревшей версией браузера.

Почему вёрстка поехала: 6 частых причин

  • Вставка текста из Word - вместе с текстом на страницу попадают чужие стили, которые ломают сетку
  • Незакрытый тег - одна потерянная закрывающая скобка div перекраивает всё, что ниже по странице
  • Правка стилей на живом сайте - поменяли оформление одного блока, зацепили десяток соседних
  • Обновление шаблона или платформы - новые стили конфликтуют со старыми доработками
  • Новый виджет - онлайн-чат, квиз или баннер приносят собственный CSS и переопределяют ваш
  • Кэш - сервер уже отдаёт новый HTML, а браузер посетителя держит старый файл стилей

Как найти место поломки: диагностика по шагам

  1. Отсеките кэш браузераCtrl+F5, режим инкогнито, другой браузер. Треть «поломок» заканчивается на этом шаге.
  2. Сбросьте кэш сайтаВ 1С-Битрикс кэш очищается из админки за пару кликов. Композитный кэш тоже: страница могла закэшироваться уже в сломанном виде.
  3. Вспомните последнюю правкуЧто меняли перед поломкой: текст, шаблон, модуль, счётчик? Откат последнего изменения чинит большинство случаев.
  4. Осмотрите сломанный блокПравая кнопка - «Просмотреть код». DevTools покажет, какой стиль применился и откуда пришёл: из какого файла и с какой строки.
  5. Прогоните страницу через валидатор HTMLНезакрытые теги валидатор находит за секунды - глазами их можно искать часами.
  6. Сравните с бэкапомРазверните копию шаблона из бэкапа и сравните файлы: разница покажет, что именно изменилось и когда.
Вёрстка поехала «сама», без правок? Насторожитесь: посторонние вставки в страницах - частый след взлома, когда чужой скрипт или невидимый блок ломает разметку. Проверьте сайт по списку признаков из статьи «Как понять, что сайт взломан».

Починим вёрстку аккуратно

Найдём причину, исправим шаблон и проверим сайт на всех разрешениях: от смартфона до широкого монитора. Смета бесплатная, за 1 день, работы по договору.

Починить вёрстку

Как чинить надолго, а не до следующей правки

Сломанную страницу можно «подпереть» лишним стилем за пять минут - и через месяц она сломается снова. Надолго чинят иначе: правки вносятся на тестовой копии и переезжают на боевой сайт после проверки; контент вставляется без чужого форматирования (сочетание Ctrl+Shift+V); кастомные стили живут в одном файле, а не размазаны по десяти; после каждой правки страница проверяется на телефоне. Тестовая копия и автоматические бэкапы - штатная часть поддержки сайтов: ломать становится просто негде.

Девять из десяти сломанных макетов, которые к нам приносят, ломались одинаково: правка на живом сайте без копии и без проверки на мобильных. Тестовая копия стоит ноль и экономит недели.Команда Alavir

Сколько стоит починить вёрстку сайта

Час работы верстальщика - 50-100 BYN. Типовая поломка (съехавший блок, конфликт после установки виджета) закрывается за 1-3 часа. Системная переборка шаблона со сведением стилей и адаптивом - от 300-500 BYN в зависимости от объёма. Точную цифру называем после осмотра: пришлите адрес сайта и скриншот - смету посчитаем бесплатно за 1 день. Учтите: кривые правки шаблона ломают не только внешность - ошибка в PHP-файле шаблона кладёт сайт целиком, таким случаям посвящена статья про ошибку 500.

Частые вопросы о поехавшей вёрстке

Почему вёрстка поехала только в одном браузере?
Старые браузеры не понимают современные свойства CSS, а расширения (блокировщики, темы) вмешиваются в стили. Проверьте страницу без расширений и обновите браузер. Если ломается в актуальном браузере без расширений - дело в коде.
Дизайн сломался только на телефоне - это то же самое?
Это дефект адаптивной вёрстки: стили для узких экранов описаны отдельно, и правка «для компьютера» их не учла. Чинится в тех же файлах стилей, но проверять нужно на реальных устройствах, а не только в эмуляторе.
Вёрстка поехала после обновления 1С-Битрикс - что делать?
Это конфликт обновления с доработками шаблона. Есть бэкап - откатитесь, затем повторите обновление на тестовой копии и найдите конфликт. Бэкапа нет - чинить стили точечно. На будущее: обновляться только с бэкапом.
Можно просто восстановить сайт из бэкапа?
Можно, но вместе с вёрсткой откатится и контент: заказы, статьи, правки за период. Аккуратнее восстановить только файлы шаблона, не трогая базу. Сомневаетесь - спросите специалиста до восстановления, а не после.

Поехавшая вёрстка - симптом: где-то в шаблоне конфликт, который будет стрелять после каждой правки. Разовая доработка сайта в Alavir решает и симптом, и причину: чиним, сводим стили, проверяем адаптив. С 2013 года, 450+ проектов на 1С-Битрикс, смета бесплатно за 1 день.