title: How to set the JQuery FlexSlider height using CSS?
body: <p>I am not very into CSS and I have the following website that use <strong>BootStrap</strong> CSS framework and <strong>FlexSlider</strong> JQuery plugin to show the upper slideshow: <a href="http://onofri.org/WP_BootStrap/" rel="nofollow">http://onofri.org/WP_BootStrap/</a></p>
  
  <p>I have the following doubts about how reduce the slide show height: if using FireBug I decrease the value of <strong>max-height</strong> of the <strong>.flex-viewport</strong> height, this one:</p>
  
  <pre><code>.flex-viewport {
      max-height: 2000px;
      transition: all 1s ease 0s;
  }
  </code></pre>
  
  <p>I obtain that the height of the shown immages area is decreased to the new value (for example 200 px) ok but now I have the problem that the text written on my immages (represent by the span inside the <strong>.flex-caption-text</strong> paragraph) is in a bad position:</p>
  
  <pre><code>            &lt;div id="main-slider" class="flexslider"&gt;
                  &lt;ul class="slides"&gt;
                      &lt;li&gt;
                          &lt;img src="http://localhost/wordpress/wp-content/themes/AsperTheme/assets/img/flexslider/flex-1.jpg"/&gt;
                          &lt;div class="flex-caption"&gt;
                              &lt;p class="flex-caption-text"&gt;
                                  &lt;span&gt;Lorem ipsum&lt;/span&gt;
                                  &lt;br&gt;
                                  &lt;span&gt;sit dolor&lt;/span&gt;
                                  &lt;br&gt;
                                  &lt;span&gt;adipiscing elitur&lt;/span&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
  </code></pre>
  
  <p>To obtain that the text is in a good position I think that I can decrease the value of top property of the .flex-caption class</p>
  
  <p>.flex-caption {
      position: absolute;
      right: 8%;
      top: 35%;
  }</p>
  
  <p>Is it a good solution or can I have some other kind of problems (maybe in browser different from FireFox)?</p>
  
  <p>The other doubts is related to a <strong>FireBug</strong> behavior, infact if I do the following operations:</p>
  
  <p>1) I change the value of max-height in.flex-viewportin in this way:</p>
  
  <pre><code>.flex-viewport {
      max-height: 200px;
      transition: all 1s ease 0s;
  }
  </code></pre>
  
  <p>As I say the heigh of the slideshow immages area is decreased</p>
  
  <p>2) I highlight the content of a single slide putting the mouse cursor on this html line:</p>
  
  <pre><code>&lt;ul class="slides" style="width: 1000%; margin-left: -1288px;"&gt;
  </code></pre>
  
  <p>in this case FireBug show me in blue color the height of this area and it seems to me that have the same height of the old container (2000px), why?</p>
  
  <p>Tnx</p>
  
  <p>Andrea</p>