Design comparison
Solution retrospective
Here is my solution. If anybody has some input on how to better manage the gird row height I would appreciate the input. My bottom row is slightly larger than the top row. If I adjust the height from the first grid that spans 2 rows it doesn't seem to affect the grid row proportionality.
My javascript is super ugly. I feel like it's the equivalent of using a sledgehammer when a ball-peen hammer would have done the job. It works but...yeah. I look forward to looking through other solutions to see how they came to a solution. Cheers!!!
Community feedback
- @FoxMalder-coderPosted over 2 years ago
Hi! To make grid row the same height use grid-template-rows: 1fr 1fr or repeat(2, 1fr). Also I'v suggest to use some intermediate grid between small screen and desktop, and center content on large screen. About js - first cut styling from js to css (h6.daily, h6.weekly, h6.monthly have same styling for passive state and active state - use one class for passive, for example, selector, and another one for active, for exemple, selectorActive; and then just toggle class in js). Another thing is that your doing the same in all three function - try to pass value (daily, monthly, weekly) inside just one function. p.s. strange to see camelCase in html...
Marked as helpful2@TheShonuffPosted over 2 years ago@FoxMalder-coder Thank you for taking the time to look at my code and write a response. I'll attempt to implement your suggestions in a fork soon. As for the camel casing in HTML... yeah it's an ugly habit I need to break. I camelcase everything.
0
Please log in to post a comment
Log in with GitHub
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