Почему появляется скролл горизонтальный раньше чем нужно?

Question

[Fyodor]

Не могу понять

почему при таком размере окна
https://yadi.sk/i/7DOsdL6kcwo2m

появляется горизонтальный скролл?

www.sunway-nsk.ru

Вроде ничего не вылазит.
На мобильных устройствах соответственно часть фона видно из-за этого и визуально как будто margion:0 auto; не так работает как надо - сайт не по центру как будто.

Comments

[Владик Лимонадик]

"Если Вам нужен сайт, интернет-магазин, лэнддинг" - эти слова из-под вашей клавиатуры появились?

[Fyodor]

knitevision1: вообще не понимаю о чем вы

[Владик Лимонадик]

Потому что у вас у боди background: fon.jpg. У него рисунок такой, который создает иллюзию того, что всё плохо. И вообще, моветон уже веб-аппы лепить без box-sizing: border-box на всех элементах. И сдался вам этот скролл, какая разница, что на мобильных девайсах, если он всё равно не оптимизирован для них. Вы предлагаете юзеру бесконечно зумить? overflow-x: hidden и погнали

[Владик Лимонадик]

Richard_Ferlow: veshkin.com

[Fyodor]

knitevision1: сайт не мой

[Fyodor]

knitevision1: по теме - не в border-box дело https://yadi.sk/i/WHYRKGb4cxBJ4 клиенты просят чтобы не было непонятного куска фона при открытии на телефоне-планшете. а что не оптимизирован это вопрос другой уже.

Answer 1

[Alexander Sydorenko]

Простите, а почему он не должен появляться? У Вас

.wrapper {
    background-color: #fff;
    margin: 0 auto;
    padding: 0 15px 10px;
    width: 970px;
}

То-есть фиксированная ширина страницы 970px и белый фон у этих 970px, а далее у вас отступы по 15px c каждой стороны благодаря padding: 0 15px 10px; То-есть ширина контейнера у вас 1000px - как только окно становится меньше чтобы все это уместить, появляется горизонтальный скролл..

Comments

[Fyodor]

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

[Alexander Sydorenko]

Richard_Ferlow: Ну Вы пока меряйте, а я знаю. Пока box-sizing: content-box; (значение по умолчанию, если его не трогать) отступы за белым фоном. :)

[Viktor Vsk]

а что это за паддинг с тремя значениями?

[Alexander Sydorenko]

Виктор Выскребенцев: сокращенная форма, при такой записи верх 0, левый-правый 15px, низ 10. То-есть, если не указан левый (четвертое значение) то берется левый равно правому

[Viktor Vsk]

Alexander Sydorenko: понял, спасибо) всегда считал нагляднее или 4 параметра указывать, или уже раздельно margin/padding-left/right/top/bottom

[Alexander Sydorenko]

Виктор Выскребенцев: Такое работает и для margin? ну и везде где есть верх, справа, низ, слева. Если просто то:

padding:Apx; // все отсупы A пх;
padding:Apx Bpx; // верх/низ A пх левый правый B пх;
padding:Apx Bpx Cpx; // верх A пх левый правый B пх, низ C пх;
padding:Apx Bpx Cpx Dpx; // верх A пх правый B пх, низ C пх, левый Dпх;

[Viktor Vsk]

Alexander Sydorenko: ну, 2 параметра и 4 параметра (а так же left/right/top/bottom) работают определенно

[Viktor Vsk]

и один, естественно

[Viktor Vsk]

Просто вот если 3, то как-то неочевидно и сложновато запомнить, мне кажется: "дублируется" автоматически верх\низ или право\лево

[Alexander Sydorenko]

Виктор Выскребенцев: Ну правило такое, если нет какого то значения в очереди (последнего, левого) значит берем значение симметричного (второго, правого), если нет симметричного, тогда значение одинаково для всех.

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

[Fyodor]

Виктор Выскребенцев: запомнить просто - по часовой идут значения - сверху справа снизу слева. у многих значений так

[Fyodor]

Alexander Sydorenko: смотрите, то что вы сказали это понятно все, однако посмотрите в firebug допустим - если padding 0 у wrapper сделать https://yadi.sk/i/WHYRKGb4cxBJ4 - в общем wrapper полностью в экран помещается, но все равно скролл откуда-то

[Fyodor]

Alexander Sydorenko: в flex-next и flex-prev похоже проблемы

[Alexander Sydorenko]

Richard_Ferlow: да, вы совершенно правы.. flex-prev и flex-next имеют .flex-direction-nav .flex-next right:-36px; и .flex-direction-nav .flex-prev left:-36px;, через эти правила и вылезают за контент. но я не вижу фактически этих ссылок - кнопка вперед и кнопка назад.. если не критично, то проще всего, по-моему, убрать этот косяк, добавив правило для .flexslider {overflow:hidden;} Ну либо поставив им left и right так чтобы не вылазили в минус.

[Fyodor]

Alexander Sydorenko: да, убрал. они при наведении на блок появляются.