Design comparison
SolutionDesign
Solution retrospective
Greetings community,
Here's my solution for the [Fylo data storage component] challenge
It was my first junior challenge and I hope I did good. Feel free to leave a feedback ⭐️
I made this using a mobile first workflow and added 2 media queries for larger screens.
Breakdown points are:
- min-width: 900px (desktop version)
- min-width: 376px (switch to the desktop bg image but keeps the vertical mobile layout)
Everything is positioned and aligned with flexbox except the alert message for which I used the property position:absolute. The speech bubble shape for the desktop layout is made with the ::before pseudo element.
Please let me know if there's anything broken or not working as it should. **Thanks a lot! **😎
Community feedback
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