Skip to content
Submitted over 2 years ago

Responsive Fylo Data Storage Component

Secre•210
@SecreSwalowtail
A solution to the Fylo data storage component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The pop-out message thingy was very challenging, I thought it was just an image to implement...

  • Is using transform a good practice? I can't think a better way to position it.
Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Hi @SecreSwalowtail, great job here! Looks very close to the design.

    A few things I noticed that could be improved:

    • Repetition of elements - there are two versions of the storage indicators (white box), one for mobile and desktop. It also results in repetitive CSS -- lines 179-190 are the same as 255-267. I would try absolute positioning using only one of these elements to achieve the responsive layout.

    • Don't choose headings based on how large the text look in the design. h1 is a page-level heading and shouldn't be used for the number in 185 gb left. I would refactor to <p><span>185</span>gb left</p>

    • The background image gets cut off after 1440px. Change the background-size to 100% 50%

    • The buttons inside the first container should also be using the <button> tag. In a real app, they would likely be used for revealing a modal to upload different types of files.

    Hope this helps!

    Marked as helpful

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