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

voffee 70

@voffee

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


I had trouble with the cellphone and tablet media queries.

I also had a lot of trouble with positioning relative and absolute.

I initially used the progress element and couldn't style it very well before I created a progress bar from div elements.

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Hi Voffee, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- Page should contain a level-one heading click here

I noticed that the background image is not filling the entire page, to fix this we can do the following:

body { background-size: 100% 50vmin; background-position: bottom; }

the rest is great!

Hope it helps...👍

1

@lazy4gyan

Posted

Hi @voffee, I would like to highlight regarding responsiveness that instead of making first desktop based responsive site try to make mobile based, as it's easier to implement media queries in mobile based to make desktop based site.

Try to use like @media (min-width : 700px){} and rest is all good.

Happy coding :-)

1

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