Странность в адаптации сайта Chrome, можете помочь?

Question

[JyriG]

Привет!

При адаптации сайта случается при некоторых диапазонах вот такое вот.
Как исправить?
Вот ссылка на хост - honey.jyrig.me
При диапазоне в 360px, появляется такая белая полоса. Как её убрать, какой блок выходит за рамки макета?

Answer 1

[profesor08]

Ты неправильно используешь сетку. .row .col .row .col уловил структуру? Разберись с сеткой бутстрапа и следуй его правилам, тогда у тебя все будет хорошо.

Comments

[JyriG]

Да, вы правы. Об этом есть статья на хабре, или есть только на странице Bootstrap?

Answer 2

[Владимир Проскурин]

У тебя куча всего выпирает, от этого браузер пытается все вместить. Используй такую штуку
* {
outline: 1px solid red;
}
сразу увидишь что выходит за пределы.

Comments

[JyriG]

Это гениально!!
При диапазоне в 360пкс skrinshoter.ru/s/091217/Hqn4IBUG?a слайдер ведёт себя так. Вы случайно ли не знаете как это исправить?

[Владимир Проскурин]

У вас по коду куча margin-left: -69%; (и другие проценты). Не используйте это для адаптации.

[JyriG]

Vlad_IT, Почему?

[Владимир Проскурин]

JyriG, потому, что это костыли. Нужно использовать маргины с умом, только там, где это оправдано. Для выравнивания блока по центру его нельзя использовать (разве что margin: 0 auto, но не константные числа), у вас же зачем-то параграфы используют margin-left: -50%, хотя достаточно было бы родителя разместить по всей ширине width: 100%, а параграфы оставить как есть, может добавить padding. Возьмите себе за правило - если вы используете значение маргина больше |100|, возможно вы делаете что-то не так.