How to style jetpack's slideshow gallery to be fluid

  • Morning to everybody!

    I’m trying to adjust the css of the default slideshow gallery provided by jetpack in order to make the slideshow responsive.

    This is the page where I want it to be running, so you can observe how the image grows horitzontally but sticks to 410px vertically. This height is hardcoded in the gallery’s default html.

    I’ve written this css:

    .slideshow-slide {
    width: 100%;
    height: auto !important;
    max-height: 550px;
    overflow-y: hidden;
    }

.slideshow-slide img {width: 100%; height: auto;}

    The idea behind this lines of css is to force full container width, and crop (by hidding) the image while keeping a maximum height of 550px.

    This lines produce the effect you can observe in the provided link.

    Could someone give me some advice, please?

    Thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter annabinna

    (@annabinna)

    I’ve changed the css lines to these, but still doesn’t work!

    .slideshow-window,
.jetpack-slideshow {
    background: transparent !important;
    border: transparent !important;
    max-height: 550px;
}

.slideshow-slide {
    width: 100%;
    height: auto !important;
    overflow: hidden;
    }

.slideshow-slide img {width: 100%;}

.slideshow-line-height-hack {}
.slideshow-slide-caption {}

.slideshow-controls {}
Viewing 1 replies (of 1 total)
  • The topic ‘How to style jetpack's slideshow gallery to be fluid’ is closed to new replies.