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

@denislistiadi

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


how do I set the layout other than using a minus value?

Community feedback

Jen 1,230

@En-Jen

Posted

Hey Denis, I'm not sure what you mean by your question. What are you setting a minus value for? As far as the design of your solution goes, it looks really good. I just noticed that at screen widths above 1400px, the elements don't stay centered and a bunch of whitespace just gets added to the right size of the screen. You can fix that by getting rid of max-width: 1400px;

It looks like you forgot to vertically center the part that says "GB LEFT" like is shown in the design. You can do that with flexbox by doing this:

display: flex;
align-items: center;
}```

I would also suggest trying to avoid using id's as CSS selectors. Instead use classes. You can read more about the rational for that here https://paulcpederson.com/articles/css-for-people-who-hate-css/

Very nice first Frontend Mentor project! Keep it up! -Jen
1

Jen 1,230

@En-Jen

Posted

Looks like the formatting of my comment got messed up for some reason. The part that starts with display: flex; was supposed to be under the selector #usageused

0

@denislistiadi

Posted

@En-Jen okay thanks for the solution, I will implement your suggestion

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