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

@OnescuRadu

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


What do you think about how I used Flexbox?

What do you think about my approach of developing this component?

Community feedback

@dgdev1024

Posted

On mobile devices, the 'Fylo' logo and control buttons are growing in size proportionate to your screen's width, to the point where the exceed the bounds of their container on large mobile devices, like tablets. Also, the negative top margin on the '185 GB LEFT' container is causing that container to cover up your storage remaining meter under the same circumstances.

To remedy this, try adding a fixed 'max-width' property to your '.container' classes, and setting the 'margin-top' property of the '185 GB LEFT' container to a non-variable value, like '32px'. You may need to adjust these properties on your containers in your media queries, too.

Very nice work, though. Keep up the good work!

2

@OnescuRadu

Posted

@dgdev1024 Thanks for this explanation, it really helps me, considering that I never code something from scratch like this one.

I haven't got the premium features, therefore the tablet design is unavailable, that's why I did not optimise it for tablets.

Regarding the mobile phone responsiveness what is the best approach to it? Isn't using variable values like % or viewport sizes the best way to do it?

I am really looking for somebody to clarify what is the best approach to develop responsive websites for all devices? Currently I am using variable values for small devices (mobile phones) and non-variable values for large and extra large devices (laptops and desktops).

Thanks again. Looking forward for your reply.

0

@DevMoustafa97

Posted

Perfect! just three points

  • make logo smaller a little bit
  • more margin between boxes
  • reduce the border radius of the white box

otherwise it is perfect

1

@OnescuRadu

Posted

Thanks for the feedback. I appreaciate it. I fixed them.

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