Remove height property using @media

Question

p {
  overflow-y: hidden;
  height: 150px;
}

@media screen and(min-width: 700 px) {
  p {
    max-height: 150 px;
  }
}

<p>
   Hello Hello Hello Hello Hello Hello Hello Hello Hello
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
   Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</p>

<strong>h1</strong>

I want to remove the height property when screen width is less than 700px. If I do height:0px;, it completely hides the paragraph. Any CSS solution? Or do I need to use jQuery?

Answer 1

Use height: auto in the media query. That's the default setting. It will overwrite the fixed height in your standard CSS.

p {
  overflow-y: hidden;
  height: 150px;
  background: green;
}

@media screen and (min-width: 700px) {
  p {
    height: auto;
    max-height: 150px;
    background: yellow;
  }
}

<p>
  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</p>

<strong>h1</strong>

BTW: You have to write @media screen and (min-width: 700px) -> no space between "700" and "px", no space between "150" and "px" for min-height, but a space between "and" and the opening "(" in the media query

Answer 2

You can add, for smaller screens, media query height:auto

@media screen and(max-width: 700 px) {
  p {
    height:auto
  }
}

or create height only in larger screens.

p {
  overflow-y: hidden;
}
@media screen and(min-width: 700 px) {
  p {
    height:150px
  }
}