css какой элемент выходит за пределы экрана?

При адаптивной верстке часто возникает проблема: какой-то элемент начинает выходить за границы экрана, из-за чего появляется горизонтальная прокрутка и «ломается» мобильная версия сайта.

Как быстро найти элемент, ломающий адаптивную верстку

Найти проблемный блок вручную бывает непросто, особенно на больших страницах с большим количеством вложенных элементов.

В таких случаях я использую простой и очень быстрый способ — временно подсвечиваю границы всех HTML-элементов с помощью CSS:

* {
    border: 1px solid #f00;
}

После добавления этого стиля сразу становится видно, какой элемент выходит за пределы экрана и портит адаптивную верстку.

Особенно полезен этот способ при работе с:

• flex и grid контейнерами;
• широкими изображениями;
• таблицами;
• блоками с фиксированной шириной;
• неправильными margin и padding;
• элементами с width: 100vw.

После того как проблемный элемент найден, временный стиль можно удалить и продолжить работу над версткой.

Текст анонса

Если при адаптивной верстке появляется горизонтальная прокрутка и какой-то элемент выходит за границы экрана — есть простой способ быстро найти проблему. Показываю полезный CSS-трюк для поиска элементов, ломающих верстку.