Submitted almost 4 years ago

Responsive Data Storage Component - Mobile-First, Flexbox

Anna Leigh• 5,135

@brasspetals

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Fylo data storage component

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 4 years ago

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! 😃

Anna Leigh• 5,135

@brasspetals

Posted almost 4 years ago

@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! 😂

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 4 years ago

@brasspetals

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

Please log in to post a comment

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