html - Flexslider viewport won't resize height when viewing shorter image in slideshow -


by default flexslider supposed resize viewport height according height of current image being displayed. on site flexslider fixed @ height of largest image in slideshow, leaving shorter images blank white space beneath them. doing override responsive height function of flexslider? there way fix this?

live draft: http://parkerrichard.com/studiogreen/html/residential/project-01.html

html:

                <div class="flexslider">                     <div class="arrows">                         <img src="../img/arrow-left.png" class="arrow-left pull-left">                         <img src="../img/arrow-right.png" class="arrow-right pull-right">                     </div>                     <ul class="slides" id="slideshow" ondragstart="return false;">                         <li>                             <img src="../img/residential/project-01/img-01.jpg" />                             <div class="flex-caption right hidden-xs">                                 <div class="caption-content">                                     <p><span class="hcaption">project <span class="sm-spaced">1</span></span><br /></p>                                     <br />                                     location: <span class="lite">los altos hills, california</span><br />                                     architect: <span class="lite">sdg architects</span><br />                                     <br />                                     <p class="hcap">earth-tone stone , concrete terraces <br />create zen-like spaces around home. <br />california outdoor living experienced <br />in 'rooms', include pool , spa, <br />water feature wall buddha sculpture, <br />stone , gas fire pit, , outdoor kitchen <br />and dining pavilion. each feature set <br />against backdrop of ornamental grasses, <br />perennials, , mature specimen trees.</p>                                 </div>                             </div>                         </li>                         <li>                             <img src="../img/residential/project-01/img-02.jpg" />                         </li>                         <li>                             <img src="../img/residential/project-01/img-03.jpg" />                         </li>                         <li>                             <img src="../img/residential/project-01/img-04.jpg" />                         </li>                         <li>                             <img src="../img/residential/project-01/img-05.jpg" />                         </li>                         <li>                             <img src="../img/residential/project-01/img-06.jpg" />                         </li>                         <li>                             <img src="../img/residential/project-01/img-07.jpg" />                         </li>                     </ul>                 </div> 

css:

/*  * flexslider styling   */  .flexslider {     background:none !important;     border:none !important;     box-shadow:none !important; }  .slides {     overflow: hidden !important; }  .slides div .flex-caption {     overflow: scroll !important; }  .slides li img {     -moz-user-select: -moz-none;     -khtml-user-select: none;     -webkit-user-select: none;      /*      introduced in ie 10.      see http://ie.microsoft.com/testdrive/html5/msuserselect/     */     -ms-user-select: none;     user-select: none; }  .flex-direction-nav  {     color: #999 !important; }  .flex-next {     padding-right: 30px !important; }  .arrows {     position: absolute;     z-index: 90;     width: 100%;     top: 50%;     transform: translatey(-50%);     pointer-events: none; }  .arrow-left {     padding-left: 15px;     opacity: 0;     transition: opacity .7s ease-out;     -moz-transition: opacity .7s ease-out;     -webkit-transition: opacity .7s ease-out;     -o-transition: opacity .7s ease-out; }  .arrow-right {     padding-right: 20px;     opacity: 0;     transition: opacity .7s ease-out;     -moz-transition: opacity .7s ease-out;     -webkit-transition: opacity .7s ease-out;     -o-transition: opacity .7s ease-out; }  .flexslider:hover .arrow-right, .flexslider:hover .arrow-left {     opacity: 0.8;     transition: opacity .7s ease-out;     -moz-transition: opacity .7s ease-out;     -webkit-transition: opacity .7s ease-out;     -o-transition: opacity .7s ease-out; }  .flexslider:hover .flex-prev, .flexslider:hover .flex-next, .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {     opacity: 0 !important;      z-index: 100; }  @media screen , (max-width: 860px) {   .flex-direction-nav .flex-prev { opacity: 0 !important;}   .flex-direction-nav .flex-next { opacity: 0 !important;}   .arrow-right, .arrow-left { opacity: 1} }  .flex-control-nav {     text-align: right !important;     padding-right: 0px !important; }  .flex-control-paging li {     margin: 0 0px 0 12px !important; }  .flex-control-paging li {     color: transparent !important; }  .nodot .flex-control-paging li {      display: none !important; }  .flex-control-paging li a.flex-active {     background: #6dab3e !important; }   /*  * flexslider caption styling   */  .flex-caption {     position: absolute;     text-align: left;     font-size: 11px;     background:rgba(255, 255, 255, 0.7);     z-index: 100;     padding: 20px 10px 35px 30px;     width: 287px;     padding-top: 100%;     bottom: 0px;     display: none;     color: #000; }  .caption-expand {     padding-right: 0px !important;     padding-left: 20px !important; }  .right {     right: 0;     margin-bottom: 0px; }  .show-caption {     position: absolute;     top: 48%;     right: 240px;     z-index: 99;     opacity: 0.75;     filter: alpha(opacity=75); /* ie8 , earlier */     pointer-events: none;     display: none; }  .hcaption {     font-size: 13px;     text-transform: uppercase; }  .hcap {     margin-top: -7px; }  .flex-caption p {     margin-bottom: -8px; } 

when initiate in javascript flexslider apply property:

smoothheight: true

example:

$('.flexslider').flexslider({     animation: "slide",     smoothheight: true }); 

Comments

Popular posts from this blog

java - Could not locate OpenAL library -

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

sorting - opencl Bitonic sort with 64 bits keys -