Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Flyo Component with Sass

@Dorian30

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there anything you would suggest to improve ?

Community feedback

Jen 1,230

@En-Jen

Posted

Nice work! Looks pretty much spot on with the design. Design-wise, I just noticed was that at screen widths above 1400px, the background image no longer covers the entire width of the screen. It also looks like the dark blue background color for the storage bar is a little darker than the design. Another suggestion is to use relative units (like rem, em) for things like font-size, margin, padding, width, etc. Keep up the good work! -Jen

2

@Dorian30

Posted

@En-Jen Yes, you're right. The background is a little darker. I uses the same values from the style guide, but for some reason it looks darker. I'll check the background detail though, thanks!

Regarding the responsiveness, I think absolute measures give you more control over your elements flow. It's true that relative units make your components more fluid, but as a trade off it is imposible to figure out what measure they will have by just looking at the code. That's why I set everything as "max-width: someValue; width 100%".

Although, I totally agree with relative units when it comes to fonts.

Thanks for the feedback! :rocket:

0

Please log in to post a comment

Log in with GitHub
Discord logo

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