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

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

Denis Listiadi’s questions for the community

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

Community feedback

P
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


P
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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!