Make Flexslider images responsive

Many of our themes comes with FlexSlider as page header option where images use the CSS cover property with fixed height for all the devices including desktop, tablet, mobile. To make the slider height change as per the device some additional CSS needs to be added. This CSS can be added at Theme Options => Custom CSS/JS (CSS Field) or Custom CSS available at Appearance => Customizer. Here’s the CSS:

/* For Desktops */
@media only screen and (min-width: 992px) {
  .hero-slider,.hero-slider.flexslider ul.slides li{
    height:500px
  }
}
/* For Tablets */
@media only screen and (max-width: 992px) {
  .hero-slider,.hero-slider.flexslider ul.slides li{
    height:300px
  }
}
/* For Mobiles */
@media only screen and (max-width: 767px) {
  .hero-slider,.hero-slider.flexslider ul.slides li{
    height:220px
  }
}