Submitted over 3 years ago

Time Tracking Dashboard (CSS Grid + Responsive)

Dainaa•175

@Dainaa

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Any help with how to ensure grid components resize similarly and don't outgrow each other is very welcome. Also - please look at the site at the vercel URL instead of in the screenshot, not sure why it's doing what it's doing to the ellipses in the screenshot, but it seems to all look alright in browsers :)

Community feedback

Nic•595
@nicm42Posted over 3 years ago
I opened this and saw the same ellipses as in the screenshot - I'm using Firefox. If I open the site in Chrome it looks fine. I think for some reason the browsers are interpreting the space differently, so Firefox is making the ellipses massive. Since Chrome told me they were taking up 21px width, I added max-width 21px to the ellipses in Firefox and then they looked fine.

Edit: meant to say it looks good and the grid components look fine to me.
Marked as helpful
1
Dainaa•175
@DainaaPosted over 3 years ago
@nicm42 Thanks a bunch! I couldn't see a difference when I opened this on Firefox on my end. I might have to add some hard-code to future projects for Firefox!
0

Please log in to post a comment

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