Hello,
I have completed the Tribute Page challenge and passed the tests. I took the mobile first approach and noticed that on a smartphone, the bottom heading element would not show completely as the device wouldn’t allow scrolling down further.
I created a second version of the page and took that element out of the Main element (all elements had to be inside Main to pass the test) and put it inside a Footer element. I made some CSS adjustments to the Footer element like giving it some padding and that fixed the issue for me.
I wanted to know if I could get some feedback on both of these versions and if I took the correct approach by adding the Footer element for a real world scenario. Here are the links:
Tribute page V1
Tribute page V2
Hi @rolonvan,
Nice tribute page!
Visually, the only feedback I can give you about the pages is that I couldn’t tell visually that the wikipedia link was a link unless I hovered over it. It’s good practice to give some visual indication of what is a hyperlink (without having to hover over it). You could do this by changing the color, the underlining, the background color, etc.
As far as the footer goes, I personally think that a footer in this case was not necessary, since the last sentence fits well with the rest of the main section. It fits both visually (it visually looks like it’s part of the section), and content-wise (it’s a natural extension of the content).
Have a good weekend! 
1 Like
Thank you for the feedback! I re-added the text decoration as to not go off the color-scheme too much. The question I had about the footer was due to the way it looked on my phone, the two versions look different at the bottom since the last heading won’t fully display (the version with the footer does). I looked at it on different phones and I had the same problem. Could it be a device thing?
Hi @rolonvan,
Interesting. Looking at both codepens side by side on a mobile site, I see what you’re talking about. Inspecting it with the Chrome DevTools, I see that the one with the footer has a bottom padding and margin of 50px and 50px respectively, and that is what’s making it look like it has more space at the bottom. See picture attached.
If you remove the margin and padding from the bottom, they will look visually identical (I think, unless there is something else I’m missing).
Happy coding!
1 Like
