Responsive Fylo Data Storage Component

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 2 years ago

  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

  0