KrMa KrMa - 26 days ago 8
CSS Question

class on div to give slideshow more height

I would like to give the slidehow under "Why choose us" MySite a height, so the slideshow holds a straight line with the other column, like this:

Picture
I hav tried to set the class

.videoHeight: {500px;}
, but the class is not called. Does anybody knows which div class I had to set it on, to make the height fit? I am using the same slideshow on other sides, therefore the height should only fits for this slideshow.

<div class="pv-40 banner">
<div class="container clearfix">

<!-- slideshow start -->
<!-- ================ -->
<div class="slideshow">
<div class="col-md-6">
<!-- slider revolution start -->
<!-- ================ -->
<div class="slider-banner-container videoHeight">
<div class="slider-banner-boxedwidth">
<ul class="slides">
<!-- slide 1 start -->
<!-- ================ -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Premium HTML5 Template">

<!-- main image -->
<img src="images/slider-boxed-slide-1.jpg" alt="slidebg1" data-bgposition="center top" data-bgrepeat="no-repeat" data-bgfit="cover">

<!-- Transparent Background -->
<div class="tp-caption dark-translucent-bg"
data-x="center"
data-y="bottom"
data-speed="600"
data-start="0">
</div>

<!-- LAYER NR. 1 -->
<div class="tp-caption sfb fadeout text-center large_white"
data-x="center"
data-y="110"
data-speed="500"
data-start="1000"
data-easing="easeOutQuad">Premium HTML5 Template
</div>

<!-- LAYER NR. 2 -->
<div class="tp-caption sfb fadeout text-center large_white tp-resizeme hidden-xs"
data-x="center"
data-y="155"
data-speed="500"
data-start="1300"
data-easing="easeOutQuad"><div class="separator light"></div>
</div>

<!-- LAYER NR. 3 -->
<div class="tp-caption sfb fadeout medium_white text-center hidden-xs"
data-x="center"
data-y="190"
data-speed="500"
data-start="1300"
data-easing="easeOutQuad"
data-endspeed="600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Nesciunt, maiores, aliquid. Repellat eum numquam <br> culpa offici, tenetur fugiat dolorum sapiente...
</div>

<!-- LAYER NR. 4 -->
<div class="tp-caption sfb fadeout small_white text-center hidden-xs"
data-x="center"
data-y="300"
data-speed="500"
data-start="1600"
data-easing="easeOutQuad"
data-endspeed="600"><a href="#" class="btn btn-dark btn-animated">Read More <i class="fa fa-arrow-right"></i></a> <span class="pl-5 pr-5">or</span> <a href="page-contact.html" class="btn btn-default btn-animated">Contact Us <i class="fa fa-envelope"></i></a>
</div>

</li>
<!-- slide 1 end -->

<!-- slide 2 start -->
<!-- ================ -->
<li data-transition="random" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Clean and Simple Design">

<!-- main image -->
<img src="images/slider-boxed-slide-2.jpg" alt="slidebg2" data-bgposition="center top" data-bgrepeat="no-repeat" data-bgfit="cover">

<!-- Transparent Background -->
<div class="tp-caption dark-translucent-bg"
data-x="center"
data-y="bottom"
data-speed="600"
data-start="0">
</div>

<!-- LAYER NR. 1 -->
<div class="tp-caption sfb fadeout text-center large_white"
data-x="center"
data-y="110"
data-speed="500"
data-start="1000"
data-easing="easeOutQuad">Clean and Simple Design
</div>

<!-- LAYER NR. 2 -->
<div class="tp-caption sfb fadeout text-center large_white tp-resizeme hidden-xs"
data-x="center"
data-y="155"
data-speed="500"
data-start="1300"
data-easing="easeOutQuad"><div class="separator light"></div>
</div>

<!-- LAYER NR. 3 -->
<div class="tp-caption sfb fadeout medium_white text-center hidden-xs"
data-x="center"
data-y="190"
data-speed="500"
data-start="1300"
data-easing="easeOutQuad"
data-endspeed="600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Nesciunt, maiores, aliquid. Repellat eum numquam <br> culpa offici, tenetur fugiat dolorum sapiente...
</div>

<!-- LAYER NR. 4 -->
<div class="tp-caption sfb fadeout small_white text-center hidden-xs"
data-x="center"
data-y="300"
data-speed="500"
data-start="1600"
data-easing="easeOutQuad"
data-endspeed="600"><a href="#" class="btn btn-dark btn-animated">Read More <i class="fa fa-arrow-right"></i></a> <span class="pl-5 pr-5">or</span> <a href="page-contact.html" class="btn btn-default btn-animated">Contact Us <i class="fa fa-envelope"></i></a>
</div>

</li>
<!-- slide 2 end -->
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
<!-- slider revolution end -->

</div>
<!-- slideshow end -->

</div>
</div>
<!-- pv-40 banner end -->

Answer

CSS Way

You need to set a min-height for #accordion-2.

#accordion-2 {
  min-height: 300px;
  border: 1px solid #ccc;
}

In the above code, I have used two things. I'll explain you why:

  1. min-height It is always to stick with min-height rather than height because of the fact that sometimes the content exceeds the height of 300px.
  2. border I have given a border in order to show you that the height of 300px is right. Without border, the background of the accordion merges with the body's background, and you won't be able to see the difference.

preview


HTML Solution

An alternate way is to use the class pw-20 for the banner instead of pw-40:

preview