Fylo Data Storage Component

Community feedback

• 

  Osius•150

  @OsiusKaraPosted over 2 years ago

  Thank you guys.

  Grace, special thanks to you for taking your time and reviewing the entire code! I'll take everything you suggested into account and I will have to make up leeway, I guess.

  I just realized that I'm not even close to understanding lengths, widths and viewports etc.

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  This has content cut off on mobile landscape and a big white bar at the bottom on mobile portrait (ill add some Screenshots to slack for you so you can see what I'm seeing)

  Reading through the html on this I think it all needs rewriting I'm afraid. The semantics are not understandable and do not present what's in the design.

  • alt on the logo img should not be hyphenated
  • those 3 images look like they would be buttons - this is a data storage app so surely they would be actions related to the app like see files, see folders, upload
  • this clearly has a progress bar but your html does not. The labels are just paragraphs so it is not clear what they mean or how they relate to the sentence above
  • similarly, the amount left is one message so should be in one paragraph not two. Don't create extra paragraphs as a way to break lines, if they are to be read together they need to be in the same semantic element

  I hope this is helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Additionally this should not have shrunk down root html font size unless you know how to mitigate against accessibility issues by scaling the font back up on the body and any elements that wouldn't inherit font size. It brings you no real benefits at all but does introduce lots of risk of content being unreadable for some people.

  The height 100vh should be min height. I think that's part of the issues with content being cut off on some screen sizes

  If you put all the bg imgs and color on body you wouldn't have the white space issues

  And if the component (main wrapper I think) content didn't have justify content center but had flex wrap and a max width that might fix the other responsiveness issues. I'm not on a computer to check though, so just guessing there!)

  Best to have dev tools open on the side and resize the viewport a lot while playing with css properties in browser to debug these things

  Good luck

  Ps one more - make main wrapper into a main element! Landmarks are important

  1
• 

  Osius•150

  @OsiusKaraPosted over 2 years ago

  Omg, why is the background -image upside down all of a sudden? Anyone an idea?

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @OsiusKara Hi Osius! 👋

  I would recommend simplifying the styling. I notice that there are two background-image properties on the body element and the main-wrapper. Also, on mobile view, to be specific at mobile landscape view 640px * 360px, the content doesn't have full width and height, there is white background around it.

  I know this is not answering your question but hopefully, this might help you solve the problem. 🙂

  If currently, this is a hard challenge, then I highly suggest doing the easier challenges first and then once you gain more knowledge, come back to this one and refactor it.

  Good luck! 👍

  0