Як знайти чому з'являється горизонтальне прокручування на сайті
Привіт:) У цьому пості покажу простий спосіб пошуку елемента на сторінці сайту, що створює горизонтальний скрол.
Наявність горизонтального прокручування на сайті (особливо в його мобільній версії) зазвичай призводить до того, що в панелі вебмайстра пошукової системи з'являється помилка, що сайт не оптимізований для мобільних пристроїв. У результаті сторінка зі скролом або весь ресурс може бути знижений у пошуковій видачі.
Щоб знайти причину горизонтального прокручування, потрібно з'ясувати, який елемент сторінки виходить за рамки екрана. Для цього рекомендую використовувати простий хак — додати всім елементам сторінки видимі границі за допомогою CSS.
Розберу декілька варіантів, як це зробити.
В основному файлі CSS-стилів (наприклад, style.css) або в коді сторінки сайту
* {
outline: 1px solid red;
}Тут замість red можете підставити свій колір (див. Таблиця безпечних веб-кольорів).
Якщо хочете додати у тіло сторінки, код оберніть у теги <style></style> і розмістіть його між тегами <head> і </head>.
Правило додасть червону границю всім елементам сторінки.
Також замість
outline можна використовувати властивість border. Але outline має декілька переваг: не впливає на розміри та положення самого елемента, не займає місце, не впливає на сусідні елементи та відображається поверх них. Директива border може зміщувати елементи, від чого буває важко знайти причину такої поведінки.У консолі розробника (DevTools) браузера
Якщо ви не бажаєте редагувати код сторінки або файл стилів, можна додати границі елементів безпосередньо у браузері. Зазначу, що після оновлення сторінки цей код пропаде.
Відкрийте консоль розробника клавішею [F12] або клацніть правою клавішею миші на будь-якому елементу сторінки та виберіть Перевірити або Дослідити.
- Знайдіть та перейдіть на вкладку Стилі.
- Натисніть на "+" (Нове правило для стилів) та пропишіть вказаний код
