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

Akimb 250

@NerijusNoreika

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


Fylo component made with SCSS and a bit of Vue (for the indicator)

What do you think about the icons? They feel a bit.. out of proportion? My approach was to wrap icons within a div container and add padding to container with background color to them. Perhaps there was a better approach?

Also one thing, to make the elements bigger I used min-width properties. I am not so sure about it... how do I make my elements bigger? I don't want to set static width, cause then it constrains the layout. Should I use padding or maybe make everything bigger (fonts etc.) ?

One reason why I dislike min-widths is that when we resize the viewport to mobile size, I need to make sure that min-widths are not bigger than the width of mobile or to completely remove min-width and use width 100%. Else elements do not shrink properly. Is there a better approach?

Community feedback

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