Dynamic Height problem

  • Resolved totoink

    (@totoink)


    11 years ago

    Hey i have installed the promotion slider on my home page as a front banner…
    Everything in the site is responsive, but when i scale the window horizontally, the promotion slider image scales, but the div keeps it’s height as a fixed one, so it creates a huge gap between the banner and the content.

    How can i fix this and make the div responsive?

    example: transpot.totoink.com

    https://www.ads-software.com/plugins/promotion-slider/

Viewing 3 replies - 1 through 3 (of 3 total)
  • webcreature

    (@david-annus)

    Hi, you have to build a div with padding in percent and relative. Then you set the div in it absolute and width and height to 100%.

    Example:
    slider 960px x 300px
    300*100%/960 = 31.25%

    my slider.css line 1 and 2

    .promo_slider_wrapper { margin:0 0 0 0; position:relative; padding-top: 31.25%;}
    .promo_slider { overflow:hidden; position:absolute; top: 0; width: 100%; height: 100%;}

    This works. If you found some static hight,you have to remove it.

    ballyhoos

    (@ballyhoos)

    The plugin is not responsive due to the ‘position:absolute’ styles on certain containers. Try this as it worked for me.

    .promo_slider{
        height:auto !important;
}
.promo_slider .panel{
	position: relative !important;
}
.promo_slider_background_image img{
	width:100% !important;
	height:100% !important;
}
    ballyhoos

    (@ballyhoos)

    Actually the above code doesn’t work with more than 1 banner.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Dynamic Height problem’ is closed to new replies.

Tags