Tribute page. Feedback

Hello beautiful people!
First timer! I am sharing the first project - tribute page. I noticed that it is a good way to get feedback, learn and to give back to community. Tried to experiment with flexbox, please comment if it is any good/bad/improvable.
Also I ran both html and css through validators.

The page: https://codepen.io/paulauskas-linas/full/abJqOwK

Thanks

1 Like

Hi there, the tribute page looks great.

One thing I did notice is that your gradient doesn’t span the entire page when looking at it in Full Page View on CodePen.

You should be able to fix it by playing around with the ‘min-height’ property on the ‘main’ element. You may need to adjust the padding also.

Welcome to the forums @paulauskas-linas. Your page looks good. Some thing to revisit;

Hello. Sorry for being so late to reply! Thanks for feedback. In all browsers the background gradient looked fine. I don’t know what you meant by pointing that it didn’t span all way. But I still played a little bit with min-height, padding and added overscroll behavior property to body element so the white space wouldn’t be visible. Can you please look again and tell me if it’s okay?

Hello. Sorry for being so late to reply! Thanks for feedback. I reviewed the lesson and changed how links are represented. Can you please revisit the tribute page? Is it better now?

No worries. This isn’t live chat. You’re busy with things and the people who review aren’t always right there.

The links look better. I just wanted you to be aware of making a link responsive to those that rely on a screen reader. Good job!

I look forward to seeing your next project.

Hi, no worries.

I’m sorry if I didn’t explain myself very well. For me on FireFox and Edge, I am getting an empty white space at the bottom of the page. I included an image below showing what I see.

I changed your #main style below to the following

#main {
    align-content: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.822), rgb(117, 131, 177));
    margin: auto;
    min-height: 100vh;
    overflow: none;
}

This fixed the issue for me, however this might just be on my end. Either way keep up the good work.

Thanks. Interestingly, on macOS in Safari, Chrome and Firefox looks good. Tried on my android phone, on Brave browser - and there it is, that white space. It’s not that easy to make it compatible for all browsers. Thank you again, I edited my code. You made me review vh units. Let’s keep rolling :smile: