根据屏幕宽度调整 div 高度

Question

I have a div of fixed height 445px, as following:

header {
    text-align: center;
    height: 445px;
    overflow: hidden;
  margin-top: 0;
  box-shadow: 0 1px 1px rgba(57, 63, 72, 0.3);
}

I want this to stay the same height as the screen width shrinks.

The problem is, when the width shrinks under 500px, the title of the header becomes two lines, and the search input bar disappears as a consequence.

So, I want to say something like:

if (screen size >= 500) height = 600px

Is it possible? I don't want to use vh , or vw , since it shouldn't be gradual, it's only for screens with under 500px.

I'm using react

Answer 1

you can use media queries. Which you can define styles for different screen sizes.

@media only screen and (max-width: 500px) {
    header {
        height:600px;
       }
 }

Answer 2

if I understood you correctly, you've to do something like that:

@media only screen and (min-width: 500px) {
    header {
        height: 600px;
    }
}

This means that if the screen is more than 500px , the header's height will be 600px

Answer 3

whats your html looking like? This sounds like its a problem of the class of the div your trying to affect.