Ширина блока магически теряет треть на маленьком экране!?

Question

[Worddoc]

Здравствуйте. Всплыла проблема, на которую забил, но сейчас приходится разгребать. Дело в том, что есть макет сайта(для практики), часть, которую рассматриваем - футер(с тегом header как ни странно:)). Так вот, с большого экрана всё выглядит так, как надо, с экрана с маленьким разрешением(телефон) фон этой нижней части почему-то сокращается раза в 3. Это прекрасно можно увидеть, если сузить ширину браузера .



Пробовал удалять все из этого блока, чтобы остался пустым - все равно. Пробовал min-width и также 100vw - так же не работает. Здесь даже в коде не за что зацепиться!

https://jsfiddle.net/h62xp0ge/ (css)
https://jsfiddle.net/0ma908up/ (scss)

Такая проблема встречается уже со вторым сайтом. Буду ооочень благодарен за помощь!

Answer 1

[Андрей Hecc]

У вас блок .container имеет фиксированый размер width:1070рх, при том что его родитель header (который почему-то футер) имеет 100% ширину, которая берется от элемента body т.к у вас отсутствует какая либо общая отвертка.
Таким образом родитель растягивается на 100% от размера вашего экрана (подозреваю что 320рх), а дочерний элемент выходит за его пределы потому что его размеры 1070рх.
Это все видно в dev-tools и очень быстро отлавливается.

Попробуйте добавить мета-тег:
<meta name="viewport" content="width=XXX">
где вместо ХХХ ширина вашего контента (подозреваю что 1070рх)

По сути тоже самое что добавить для body min-width: 1070px

/* line 99, ../sass/screen.scss */
.container {
  width: 1070px;
  height: auto;
  margin: 0 auto;
  padding: 0 10px;
}

Comments

[Worddoc]

Хм... Мета тег не работает. Странно, а как можно поменять структуру, чтобы исправить проблему? Готов переписать код

[Андрей Hecc]

В плане независимые блоки? У вас контейнер вложен в футер.
https://www.dropbox.com/s/ynn5gktdp6pv21i/%D0%A1%D...

Попробуйте добавить к body min-width: 1070рх.

[Worddoc]

Андрей Hecc: ааа, точно, думал другой контейнер) Да, ширина у боди помогла. Спасибо большое! А то дальше бы наступал на эти грабли. Ценю за помощь! Удачи!)!)

[Андрей Hecc]

Worddoc: Да, не за что)