Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Ryan C.

    (@ryancowles)

    Slideshows do not have any built-in sizing options. The width of the slideshow is based on your theme’s content width, and the max-height is set to 410px. The images then scale automatically to fit within those constraints.

    However, you can use some custom CSS to modify the height. This approach is a little “hacky” but it might be worth trying.

    To start, use the following to scale down your images:

    .jetpack-slideshow .slideshow-slide img {
         max-height: 200px !important;
    }

    Then you would need to modify a couple of the parent elements to compensate for the change in height:

    .jetpack-slideshow {
    	height: 200px !important;
    }
    
    .jetpack-slideshow .slideshow-slide {
    	line-height: 200px !important;
    }

    Like I said, it’s a little hacky so I can’t guarantee cross-browser support. But hopefully that helps!

    Please don’t hesitate to let me know if you have any other questions, or if you’d like me to elaborate on anything,

    I actually found the line-height didn’t need to be changed, but the other two changes were necessary.

    Can I suggest that this 410px default height be made customizable without CSS? Would be great to add an option. Google searches show this is a relatively common question.

    #gallery-9415-1-slideshow,
    #gallery-9415-1-slideshow, .slideshow-slide img {
    height: 490px !important;
    }

    .jetpack-slideshow .slideshow-slide img {
    max-height:510px !important;
    }

    it totally works on large screens, but breaks everything on mobile. Gallery looks stretched. Is there any solution? Page is – https://www.coma.lv/photo/wedding/

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘jetpack slideshow height’ is closed to new replies.