Design comparison
Solution retrospective
Thank you for reviewing my project!
I have been struggling with the responsiveness, but it seems to work now.....
Please let me know, if you have any suggestions on how to improve.
Cheers
Community feedback
- @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 - @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@grace-snowPosted over 2 years agoAdditionally 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 - @OsiusKaraPosted over 2 years ago
Omg, why is the background -image upside down all of a sudden? Anyone an idea?
0@vanzasetiaPosted over 2 years ago@OsiusKara Hi Osius! 👋
I would recommend simplifying the styling. I notice that there are two
background-image
properties on thebody
element and themain-wrapper
. Also, on mobile view, to be specific at mobile landscape view640px
*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
Please log in to post a comment
Log in with GitHubJoin 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