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

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

```html
<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?