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

Fylo data storage component using flexbox for layout

@TheCodingArchi

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


Hi! Stop-start newbie dev here. Looking to add some consistencies to my learning. This is my first challenge, please kindly help review my code and provide some feedbacks on how to write code better. Thanks!

Community feedback

@tomiwaorimoloye

Posted

Congrats on your first submission. Your work looks good. Try to fix the background in order for it to align with the main content.

0

@TheCodingArchi

Posted

Thanks @ayoelx ! Will fix the issue with the background soon.

0

@hoehooiyan

Posted

Hi there, congrats on your first submission!

I noticed that you only target the media queries desktop and mobile version. I suggest you can make the logo-icon-card & storage-card stack on each other starting from the tablet size breakpoint.

For the background image, to make it look better on larger screen, you can set the background property like so:

  1. background-position: bottom center;
  2. background-size: 100% 50%;

This way, the width of the background image will stretch across the screen no matter what is their size.

Also, I suggest you write those background property in full name instead of their shorthand, this will increase the readability. So that we get to know immediately which value matches which property.

Thank you for reading! 😀

0

@TheCodingArchi

Posted

Thanks @hoehooiyan ! Your feedback hit the nail on the head on some of the challenges I faced while doing this. I will update with your suggestions. Thanks again!

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