Why are the images in my slideshow being cropped?


The CSS for Slideshows that appear on your home page or secondary page headers, have a max-height safety mechanism to prevent an image from overwhelming a page with a really tall image (forcing users to scroll for a long time before reaching content). This is especially true for any Designs that make use of a Full Page Width, as the image will infinitely grow wider as the browser window expands.  Any image taller than the max-height will be zoomed and masked off, so that it fills the max area.  

Another thing to consider is the that Slideshows, like the entire website, make use of "Responsive Design" so that they look good on all devices, including mobile phones and tablets.  The Slideshow will attempt to keep all images perfectly within its own dimensions. The dimension is determined by the constraints of the predesigned layout of the page, as well as the ratio of the first image you upload (all the other images will be zoomed and cropped to match this ratio). Because of that, having multiple images of different sizes/ratios is not recommended, as the Slideshow will need to focus on a single one and then stretch or squish the rest to stay responsive as well.

So we recommend that you decide on the good ratio for your slideshow (e.g. 16:9 or whatever we recommend in the template design page), and then crop all your images to the correct size before you upload.

Have more questions? Submit a request


Please sign in to leave a comment.