CODEWITHSUNDEEP
javascripthtmlcssreactjs
Iam Spano
Iam Spano

Reputation: 31

Resize div height based on screen width

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

Upvotes: 0

Views: 923

Answers (3)

jeffyd193
jeffyd193

Reputation: 40

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

Upvotes: -1

shai_sharakanski
shai_sharakanski

Reputation: 417

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

Upvotes: 1

Anurag Tripathi
Anurag Tripathi

Reputation: 36

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

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

Upvotes: 1

Related Questions