Skip to content
Submitted about 5 years ago

Fylo Data Storage Component

Onescu Radu•70
@OnescuRadu
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What do you think about how I used Flexbox?

What do you think about my approach of developing this component?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Dennis Griffin•1,320
    @dgdev1024

    On mobile devices, the 'Fylo' logo and control buttons are growing in size proportionate to your screen's width, to the point where the exceed the bounds of their container on large mobile devices, like tablets. Also, the negative top margin on the '185 GB LEFT' container is causing that container to cover up your storage remaining meter under the same circumstances.

    To remedy this, try adding a fixed 'max-width' property to your '.container' classes, and setting the 'margin-top' property of the '185 GB LEFT' container to a non-variable value, like '32px'. You may need to adjust these properties on your containers in your media queries, too.

    Very nice work, though. Keep up the good work!

  • Moustafa Mahmoud•245
    @DevMoustafa97

    Perfect! just three points

    • make logo smaller a little bit
    • more margin between boxes
    • reduce the border radius of the white box

    otherwise it is perfect

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