Skip to content
Submitted 5 months ago

CSS and HTML solution

Ryan Kunkel•30
@rykunk21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Tennille Clayton•10
    @tennilleclaytonPosted 5 months ago

    @rykunk21, Great job on your project! It looks fantastic. There's just two small additions needed:

    1. Add a box shadow
    2. H1 color = Dark blue: hsl(218, 44%, 22%).

    Great job again for your excellent work!

    0
  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    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