Das ganze nennt sich Breakpoints. 13 sind definitiv zu viel, ganz gleich was Browser Developer Tools vorschlagen. 5 Breakpoints reichen:
Code:
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 480px) {
}
Neben der / den Headline/s muss auch das hero image hinzugefügt werden, es wird momentan auf 100 % width gezogen, height bleibt statisch fix. Das hero image kann als background-image mit einer height-Angabe in den breakpoints und background-size cover im CSS auf Linie gehalten werden. So bleibt das image proportional sauber, wenn es in der max-width hinterlegt wird.