Time tracking dashboard using CSS Grid, Fetch API

Community feedback

• 

  Shivam•520

  @shivjoshi1996Posted about 3 years ago

  Hey Correa,

  Awesome job on this!

  I noticed that when you shrink the window down to tablet size, the time card layout breaks a little, with the background color of the header also expanding down to the bottom. (I tested this in Chrome).

  I think this is due to your grid, if you add align-items: center; to your <main> element, it should fix this issue. Though this might make your profile on the left-hand side shrink in height, but you can use height: 100% on the user div to fix this.

  I also noticed that your time cards have the background colour "bleed" to the edge on the bottom left and right of the cards. I had the same issue and it took me a while to fix, but I eventually ended up making three containers - one parent container for the overall card, one child container for the icon header, and one child container for the time information. This solved the issue, and you can see the code here: https://github.com/shivjoshi1996/time-tracking-dashboard-react/blob/master/src/components/TimeCard.js

  Marked as helpful

  0
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Great work Correa,

  It works perfectly for both desktop and mobile views!

  1
• 

  Rohit Dubey•335

  @rohitdubey1352Posted about 3 years ago

  Great, design it looks nice on a mobile device.

  1