Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Time tracking app with React and Sass

WandoCode 840

@Wandole

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I made everything with flexbox but I will definitly recode the style with grid (for the main layout), it should be easier!

Any idea to hide the border on the cards bottom angles?

Thanks!

Community feedback

mycrochip 460

@mycrochip

Posted

Hi WandoCode, A wonderful solution you've got here. I love it!

With regards to your concern about the extra pixels of the parent element showing beneath the child's, you could remove the bottom border radii on the child element and set the parent to:

.parent {
    overflow: hidden;
}
/*where "X" and "Y" are set to sizes of your choice*/
.child {
    border-radius: Xpx Ypx 0 0; 
    width: 100%;
    display: block;
}

While you are at that, you could also fix your HTML validation issue, it's a great way to learn (it's already so commendable that you've got just a single issue ^_~).

Marked as helpful

0

WandoCode 840

@Wandole

Posted

@mycrochip Oh, it's a good solution! Thank you :-)

1
mycrochip 460

@mycrochip

Posted

@Wandole You're welcome and keep up the good work.

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