Как правильно сделать адаптивный фон?

Question

[Roman Polezhaev]

Всем добрый день, постигаю науку верстки сайтов , и появились вопросы, поэтому прошу сильно тапками не кидаться =)
1) Есть два блока на странице , шириной они 1140px , как правильно реализовать фон на всю ширину экрана? Реализовал я так - https://codepen.io/polezhaevr/pen/bGeOvrd


2) Сделал блок с поиском , вроде нормально , НО! Почему он не сжимается при изменении разрешения , а остальные два сжимаются ? Также, прилагаю код на блок с поисковиком

https://codepen.io/polezhaevr/pen/bGeOvrd

Comments

[Ankhena]

Ваши простынки кода вот сюююююда или сюда

С фоном да, верно, делаете обертку шириной на всю ширину окна.

[Roman Polezhaev]

Ankhena, https://codepen.io/polezhaevr/pen/bGeOvrd

[Ankhena]

Roman Polezhaev, вы задали поиску фиксированную ширину 520px, почему он должен сжиматься?

Кнопки лучше делать тегом button, а не input, стилизовать будет проще.

[Roman Polezhaev]

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

[Ankhena]

Roman Polezhaev, почитайте про flex-grow и flex-shrink.
Или про minmax() для grid.

Сейчас вы делаете так: https://jsfiddle.net/fsvxLjno/
Если места не хватает, то блоки ужимаются.
Если им задать flex-shrink 0, то они перестанут это делать и начнут вываливаться из блока, если им не хватит места.