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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.