Hey, I recently discovered Neil Gaiman and got hooked . Been working my way through his books since the middle of August.
The image carousel is indeed huge, especially on wide screens. The rule of thumb with these full-width sliders is that they should never take more space than ~90% of the screen height (citation needed, just my feeling). My reasoning is that this way the user will always be able to see the full image, without having to hit exactly the right spot (if the height were exactly 100%).
One way to tackle that is with media queries, setting different sizes based on the size of the window. There is a new magically awesome unit you can use now though, that is called viewport width and viewport height. (
vh). This means you can actually set a max-height on the image that is for example
90vh. That will result in a photo that is
width: 100%; and a height that equales 90% of the viewports height. That will also result in a weirdly stretched image that is probably not what you want
To avoid that, we can set the image as a
background-image on a
<div> instead of using the
<img> tag. The background property has an option called
background-size, and if you set it to
cover the browser till use the image to always cover the area of the
div without stretching it (it will basically be ‘cropped’). Just make sure to set the size of the
div correctly and you should be good to go.
Another thing you could try (which might render all of the above unnecessary) is setting a max-width for the entire page. Because it looks pretty good on a narrow screen, as is.
I have to agree with @koddsson about the contrast on the text. To be honest light grey isn’t a great background color for text, since it’s harder to find a color that will be legible on top of it. Might want to go with a darker grey with white text, or an even lighter grey with black/dark color for the text?