[HTML]Responsywność a height headera, Nie dopasowana do urządzeń mobilnych Opcje

[baentizo]

Mam problem ze stroną którą zrobiłem.
W komputerze wygląda idealnie, na telefonie zresztą też - schody zaczynają się w momencie rozdzielczości powyżej 640 px
height headera który odpowiada dobrej wysokości zarówno w telefonie jak i komputerze przy innej rozdzielczości wygląda tak - jest po prostu ucięte.
(IMG:https://images92.fotosik.pl/278/74c727b0125db116.png)
Dopiero po zmianie na height: 600 px na niektórych urządzeniach wygląda wzorowo, za to na telefonie tak, a na komputerze tragedia.
(IMG:https://images90.fotosik.pl/277/a86490410d57f60c.png)
Urządzeń/rozdzielczości jest sporo i każda grafika ma swoje height które powinno automatycznie je ustawiać - w zależności od urządzenia w którym przeglądamy stronę - od 300 po 600 px

Walczę z tym (bezskutecznie) od ponad miesiąca - albo header jest ucięty, albo za wysoki.
Co robić?

[Lord]

https://jsbin.com/gigapeludo/edit?html,output