Rectangle 27 0

html CSS change header height based on width?


@media (max-width: 900px) { 
header {height: 70px;}
}
@media (max-width: 700px) { 
header {height: 50px;}
}
@media (max-width: 400px) { 
header {height: 30px;}
}

So this is what I would do in your case. Something like adding:

Well, if you are making a responsive website sooner or later, imho, you may need to introduce media queries.

change the different steps to whatever window width you want your header to get smaller.

Note