@shivjoshi1996
Posted
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