Меню
Оставить заявку

Белая полоса справа на сайте. Решение

Белая полоса справа на сайте — частый и сложный вопрос, особенно для начинающих разработчиков.

Видеоурок

В чем проблема

Белая полоса может появляться по многим причинам, но если коротко, это «вывалившиеся» за сайт элементы, либо огромные отступы (margin) вправо.

Они могут быть скрыты, неочевидны, сразу можно не разобраться, что вылезает за границу сайта и создает эту белую полосу.

Пришлось повозится, чтобы создать эту ситуацию xD

Обычно пытаешься это решить, а вот создавать — впервые.

Демонстрация проблемы
Проблема

Итак, нашлась проблема — появилась белая полоса. Вы уже знаете, что это выпавшие за границу элементы сайта или их отступы.

Нам нужно их найти. Иногда, они видны сразу, как здесь:

Демонстрация проблемных блоков
Нашли проблемные блоки

Иногда, они не видны совсем, и по сайту сплошняком идет белая полоса, это уже сложнее. Я в таких случая просто удаляю по секции, и смотрю, после какой секции ситуация нормализуется.

Удаление секций

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

  • скрытые модальные окно или меню
  • flex или grid сетки
  • заголовки или подзаголовки

Посмотрим на моем примере, что я сделал не так и как исправить ситуацию в моем случае.

У меня 2 проблемы:

css код этого примера
css код этого примера
  1. У flex сетки нет свойства flex-wrap, которое отвечает за переброс элементов, в том случае, если места для них на экране нет
  2. Размер и формат заголовка, Заголовок длинный и без пробелов, нужно либо изменить его, либо уменьшить размер.

Исправим

Исправил заголовок — добавил пробелы.

html код заголовка
Изменил заголовок

Добавил flex-wrap: wrap;

css код
Добавил flex-wrap

Тестируем

Демонстрация исправленного сайта
проблема решена

Спасибо за прочтение статьи!

Если материал был полезен для тебя — напиши «спасибо» в комментариях, это займет 30 секунд. Сделаешь приятно 🙂 Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Похожие статьи

Делаем всплывающую панель на javascript
Модальные окна на javascript. 30 строк кода
Табы на JQuery и JavaScript
Прогресс-бар за 20 строк.

Поделиться
Отправить

Есть заказ, но не времени?

Получи деньги за работу, которую выполню я

Все по честному! Ты передаешь мне заказ, и с оплаты заказа получаешь кэшбек 15%.

Я работаю по такой же схеме: я могу передавать тебе заказы за 15% кэшбэка. Выгоднее обмениваться заказами, а не терять их. Мои партнеры заработали с моими заказами более 100 000 рублей.

Переходи на страницу контакты и напиши туда, где удобнее будет общаться.

Обсудить партнерство

Комментарии