Смежные media queries отображаются внахлест

[Com7]

Доброго дня.
Я новичек в адаптивной вестке, и чего то я не могу врубится в одну проблему...
Смежные media queries отображаются внахлест не пойму по какой причине, все вроде правильно, но на брекпойнтах получается скрол...

 

Величина перекрытия составляет около 12-20рх на разных точкак.

 

макет:
http://sea.kh.ua/test/test2.html

Скрин брейкпойнта 980рх http://sea.kh.ua/test/980.jpg
Скрин брейкпойнта 786рх http://sea.kh.ua/test/768.jpg

Что я делаю не так?
 

[afdw]

В Chrome всё нормально.

[Com7]

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

у меня в опере, хроме и мазиле одинаково отображается

Edited May 29, 2015 by Com7

[afdw]

Это из-за вертикального скрола. Он занимает ещё несколько пикселей.

[Com7]

хм.. из за скрола? не уверен но возможно. Если задать  например @media screen and (max-width: 1220px)  то пробелема уходит.
но при переходе на 768 поулчается никак не избежать горизонтального скрола...  там не возможно добавить 20рх .. иначе на планшетах на 768рх будут работать стили для меньших разрешений.
 Как то можно это пофиксить?
Можно конечно прописать в body   overflow-x: hidden;  и забить, но как то это не правильно

[afdw]

html, body, .box {

height: 100%;

}

.box {

overflow: auto;

}

[swandev]

хм.. из за скрола? не уверен но возможно. Если задать  например @media screen and (max-width: 1220px)  то пробелема уходит.

но при переходе на 768 поулчается никак не избежать горизонтального скрола...  там не возможно добавить 20рх .. иначе на планшетах на 768рх будут работать стили для меньших разрешений.

 Как то можно это пофиксить?

Можно конечно прописать в body   overflow-x: hidden;  и забить, но как то это не правильно

Вы не учитываете ширину скролла.  Вы меняете ширину box с 1200px на 980px при разрешении 1200px, в то время как body равен 1186px примерно, отсюда и горизонтальный скролл.

 

Посмотрите сетку bootstrap, она такая же как у вас

 

для разрешений от 1200px  делайте ширину для box 1170px

для разрешений меньше 1200px для box ставьте 970px

для  разрешений меньше 992px для box ставьте 750px

для  разрешений меньше 768px для box ставьте 100%

Edited May 30, 2015 by swandev

[Com7]

Спасибо!
Вы очень помогли..  закрадывалсь мысль что может быть из-за скролла..  но почему то был уверен что браузер считает ширину окна с учетом скролла