Slide Show Custom Height

I did a small little bit of Cascading Style Sheet (CSS) modifications for my slide show. I wanted to change the height of the slide show depending on which device the slide show is being displayed on. I will say, the first time I did this, I used VH units (Viewpoint Height) but that failed horribly on the iPad. (huge white space all over the web page.) Update to pixels works just fine. Info offered here in case anybody else has troubles, or wants to do some slight modifications for responsive websites.

Custom html:

<div class="header_slide_show">
    <?php do_action('slideshow_deploy', '510'); ?>
</div>

CSS:

/* Responsive styles  */
@media (max-width: 420px) {
/* window width less than or = 420px */
    .header_slide_show .slideshow_container,
    .header_slide_show .slideshow_content,
    .header_slide_show .slideshow_view,
    .header_slide_show .slideshow_slide,
    .header_slide_show .static_header_image{
        height: 150px !important;
    }
}

@media (min-width: 421px) {
/* window width greater than or = 421px */
    .header_slide_show .slideshow_container,
    .header_slide_show .slideshow_content,
    .header_slide_show .slideshow_view,
    .header_slide_show .slideshow_slide,
    .header_slide_show .static_header_image{
        height: 250px !important;
    }
}

nice job to the plugin authors. Many thanks.

https://wordpress.org/plugins/slideshow-jquery-image-gallery/