Tennille Clayton• 10
@tennilleclayton
Posted
@rykunk21, Great job on your project! It looks fantastic. There's just two small additions needed:
- Add a box shadow
- H1 color = Dark blue: hsl(218, 44%, 22%).
Great job again for your excellent work!
0
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
I think the project was relatively simple, I would spend more time experimenting animations next time
What challenges did you encounter, and how did you overcome them?
I had a hard time getting the font size right, It took a lot of trial and error to get it right
What specific areas of your project would you like help with?
The footer is below main content, and you have to scroll to see it. I was having a hard time figuring out how to remove the scroll bar.
Community feedback
Alex• 3,130
@Alex-Archer-I
Posted
Hi! It's quite a neat and accurate work =)
The footer issue occurs because main tag has 100vh height which means it always took a 100% of screen height.
You can solve it by applying flexbox directly to the body tag (you have to add 'flex-direction: column'). But that way footer will be directly under the main tag not in the bottom of the page.
Another way - to use position: absolute property for footer. This will allow to position it directly relative to body via four properties - top, left, right and bottom In your case you need only the last one.
Or you can just reduce the height of main by, well, 5-10vh. However in that case main content won't be perfectly centered by Y axis.
Oh, and you don't have to explicitly use font-optical-sizing: auto cos it's a default value.
I hope something of that could be useful. Good luck =)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord