Scholar

adjust slideshow height

any one figure how to adjust height of slideshow?

1 REPLY
Professor

Re: adjust slideshow height

I have done this on a few of the sites that I manage. The most important part in doing so is to make sure you are using images that are as close to the same size as possible (concerning height). Initially you can change the aspect ratio of the images via the slideshow menu (Advanced > Aspect Ratio) (your mileage may vary depending on what you're trying to achieve) and you can eliminate a bit of the margins which are set by default (Spacing > Remove the margins) which add extra height to the overall slideshow space. 

 

Now, if you want to target the slideshow directly with CSS (seems to be my regular go to Smiley Happy ) you can adjust the margins that are built in to the slideshow. The class ".wslide" is the slideshow outermost element that is rendered and you can set the margins something like

.wslide {
margin: -190px 0px; /*sets top and bottom margin negative to reduce spacing*/
}

I also set rules for various media queries so it was sort of "responsive". It might be helpful depending on what you have above or below the slideshow.

@media (min-width:1241px) {

      .wslide {

         margin: -190px 0px;
      }
   } 

   @media (min-width:1025px) and (max-width:1240px) {

      .wslide {

         margin: -100px 0px;
      }
   } 

   @media (min-width:200px) and (max-width:800px) {

      .wslide {

         margin: -25px 0px;
      }
   } 

This is only my approach to the situation and there may be an app that handles this kind of thing. Attached is my crudely photoshopped example of what the end result looks like. You can see how the slideshow itself fits snugly between text at the top and a divider and text on the bottom. Again it is imperative that the images have relatively the same height as one super tall image will blow out this approach. Let me know if you need any more guidance and if you find a less "hacky" method.

2018-05-31_0902.jpg