Neil Gaiman Tribute Page ft. Image Carousel

Hey hey hey, whipped up a tribute page. You can find it here https://codepen.io/mekkinism/full/GMpXdM/

Please do not criticize, I am very sensitive. (jk go to town).

I think the image carousel is perhaps too large when the browser fills the whole screen. What do you think? Possible solutions?

:wave: This is great! :heart_eyes:

Maybe you could try to get rid of the white vertical lines on either side of the page? I also think the grey on grey text on the bottom is a bit hard to read? I dunno? Maybe that’s just a personal preference :grimacing:

Maybe the solution to the carousel being to big is to try to utilize media queries to make the carousel take up 50% of the page when the window is big enough?

:tada: Keep at it! :man_factory_worker:

1 Like

Thanks! I did manage to get rid of the lines by deleting the container-fluid div around the header area. I just don’t know why it worked… XD I put it around the main box of image/texts and sort of cheated by setting the background color to the same as the heading. I also added a footer-type div and did the same thing there, but it only shows up if there’s text in it. Why is that?

definitely looking into media queries!

According to the bootstrap documentation one is supposed to use the container-fluid class ā€œ[…] for proper alignment and padding.ā€. So my guess is that a container-fluid class is only supposed to be used as a element within a container in a grid system but not the ā€œmain containerā€?

DOM Elements will expands when with the data they contain. If you inspect the footer element with your browsers dev tools you can see that the element is there but has a height of 0 so it doesn’t show up:

The padding is still there tho so it does still take of space on the website :slight_smile:

1 Like

thanks babe, I love you!

1 Like

Hey, I recently discovered Neil Gaiman and got hooked :scream: :heart_eyes: . Been working my way through his books since the middle of August. :books:

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. (vw and 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 :grimacing:

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?

2 Likes