• Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
  • Home
  • Knowledge
  • Manuals
  • Video Tutorials
    • Adore Church WP
    • AutoStars WP
    • BornToGive WP
    • Gaea WP
    • Native Church WP
    • Eventer
  • Open a Ticket
  • Need Customisation?
home/Knowledge Base/How To's/Make Flexslider images responsive
Popular Search:Theme installation via WordPress, Translate the theme

Make Flexslider images responsive

109 views 1 April 20, 2020 admin

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
  }
}
Tags:native churchsliderflexslider

Was this helpful?

1 Yes  No
Related Articles
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Add Widgets in the Megamenu
  • Use Mega Menu
  • Start using SiteOrigins Page Builder
  • Make menu item unclickable
Leave A Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How To's
  • Make Flexslider images responsive
  • Set up WordPress FTP Credentials within wp-config.php
  • Generate Envato Token
  • Add Widgets in the Megamenu
  • Use Mega Menu
  • Start using SiteOrigins Page Builder
View All 22  
Popular Articles
  • Translate theme
  • Speed up your website
  • Add custom fonts to your website
  • Add Animated GIF images in WordPress
  • Returning to classic editor after new WordPress 5.0 update
KB Categories
  • Getting Started
  • How To's
  • Ticket System
  • General Issues
  • FAQs
  • Quick Solutions
  • Support Policy
  • Privacy Policy
  • © 2020 imithemes. All Rights Reserved.

Popular Search:Theme installation via WordPress, Translate the theme