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

Question

[gazes12]

https://codepen.io/gazes12/pen/YzewaEq

У меня все начинает ломатся при уменьшение экрана, как это адаптировать???
Проблема в том, что оно начинает ломатся не на планшетах, не на телефона, а на ноутбуках.
Заранее спасибо!

Answer 1

[NikitaLikosov]

Поиграйтесь с свойством min-width. Вы задаёте ширину элементов которые могут бесконечно растягиваться и сжиматься к примеру input только свойством width в процентах(проценты относительно родителя). Они так и делают ещё можно настраивать ширину flex элемента свойствами flex-grow, flex-shrink и flex-basis. Оба варианта решат вашу проблему, но вообще есть более кардинальная мера. Для более тонкой настройки изменения страницы на разных экранах используются медиазапросы