Skip to content
Submitted almost 4 years ago

HTML, CSS (Flexbox and Grid)

Zach Kyman•220
@zky63
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Couldn't get the blurb to stay put/together in the desktop version but I think I got it working in the mobile one. I think I have to position it relative to the box on the right but I'm not sure.

Any comments are welcome.

Thanks!

Community feedback

  • Grace•31,270
    @grace-snowPosted almost 4 years ago

    Sounds like good advice above 👆

    To make your background fill the screen even on small phones, give the body a min-height instead of height.

    I'd also recommend you fix the formatting in html wherever you have spaces around the equals on attributes. Html is forgiving but compilers may reject your html later on if they see something like src = "... instead of src="...

    Happy coding!

    1
    Zach Kyman•220
    @zky63Posted almost 4 years ago

    @grace-snow Thanks! I was wondering when I should be using min-height instead of height.

    0
  • Abhik•4,840
    @abhik-bPosted almost 4 years ago

    Hi Zach 👋

    Good job on this challenge, it is responsive and seems perfect I guess

    ** Just a opinion ** ~ * moving * blurbMain inside progressMeter and making the progress meter position:relative and can give better results for both screen sizes

    Great job overall , Keep contributing these awesome solutions 🚀 & Happy Coding 😇

    1

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