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?
This is great! 
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 
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?
Keep at it! 
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 
1 Like
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. (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 
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