Как узнать какой элемент сайта выходит за пределы экрана?

Разработка сайта

Нередко возникает такая проблема, что при создании мобильной версии сайта (адаптивной верстке) или доработке чужого сайта, какой-то элемент выходит за края экрана. При этом нарушается адаптивность сайта и появляется горизонтальный скролл.

Как узнать какой элемент сайта выходит за пределы экрана?

Есть лайфхак что бы найти такой элемент. Для этого нам нужно с помощью CSS задать всем элементам нашего сайта обводку.

Для этого открываем нашу страницу и нажимаем F12 или щелкнуть правой кнопкой «Посмотреть код».

Выбираем стили нашего сайта
Как узнать какой элемент сайта выходит за пределы экрана?
и вставляем этот CSS код:

* {
 border: 1px solid blue;
}

Получаем такое результат:

Как узнать какой элемент сайта выходит за пределы экрана?

Если элемент выходит за края, вы его сразу увидите. Так же можно переключиться на мобильную версию, и повторить все тоже самое. А потом уже исправить нужный элемент с помощью css.

admintyutyukov
Оцените автора
Добавить комментарий