#031 – Limiting the Slider Height for Desktop

(Updated on )

When the browser window gets larger, the slider at the top of the homepage gets ridiculously big. This is a mobile first series, but since the mobile version of the slider is already working well (perhaps we should load smaller images, but functionally it’s cool) we can focus on making it better for desktop now.

With some simple CSS, we can limit the height of it (literally setting a max-height). But we can also limit the height by limiting the width, because it keeps aspect ratio. Then if we let the overflow expose on either side, we get a pretty cool slider experience on larger screens.