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

Responsive Data Storage Component - Mobile-First, Flexbox

Anna Leigh 5,135

@brasspetals

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


Originally I completed this as desktop-first, but upon suggestion went back and converted it to mobile-first - something which I've never done. Hopefully there's no goofiness, but please let me know if you find anything!

Has anyone managed to implement a meter or progress element? I tried my hardest, but couldn't quite get the styling right for either and had some major cross-browser compatibility issues. Firefox was the only one I could get to display somewhat close to the design.

Edit: For clarity - because I couldn't get either meter or progress elements to work, I ended up just going the plain old div route. 😅 Just wondering if it's possible!

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, Anna!

Nice work! 👍

Your meter looks good on my screen (Chrome 86.something...) and the rest of your solution looks good and responds nicely.

Happy coding! 😃

1

Anna Leigh 5,135

@brasspetals

Posted

@ApplePieGiraffe Thank you! I should have been more clear - I attempted to use either a meter or a progress element, but because I couldn't get either to work, I ended up using plain old divs! 😂

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

@brasspetals

Ahh, I see! That's the same thing I did! 😁

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