Skip to content
Submitted over 4 years ago

Flymo data storage component using CSS & HTML

Chris-Ann C.•300
@cdc2021
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hiya,

Any suggestions on how to make responsiveness of the page better would be greatly appreciated. I find myself creating various breakpoints but I am sure there is an easier way of doing this.

Thank you in advance. Chris-Ann

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Chris-Ann C.! 👋

    Good effort on this challenge! 👍

    I suggest,

    • Giving the two boxes in this challenge a fixed height (rather than a height dependant upon that of the viewport) since the latter causes the dimensions of those boxes to be less predictable and a fixed height actually works well for many situations (including this one here, I think). 😉
    • Centering the elements of the page in the viewport using flexbox (rather than margin).
    • Allowing the body to fill up the entire area of the screen so that the background image doesn't get cut off in certain places.
    • Placing the dot in the progress bar inside the progress bar and positioning it relative to the progress bar so that it always remains at the end of the progress bar (even when the screen is resized).

    Hope those tips help. 🙂

    Keep coding (and happy coding, too)! 😁

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