Skip to main content
Home / The Lodge / Building a Mobile-First WordPress-Powered Artists Website / #031 – Limiting the Slider Height for Desktop

#031 – Limiting the Slider Height for Desktop

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.