Design comparison
Solution retrospective
In this challenge I played around with the clamp property for some font size and margin. I found that there was a lot of empty space in the sizes in between mobile and desktop so I thought this would be an interesting way to solve it. I still don't 100% understand the clamp function, but for the first time playing with it I'd say it was a success.
Community feedback
- @MojtabaMosaviPosted over 3 years ago
Well done, The fontsizes are a litle too big on the tablet view.
Keep coding :=)
1@FlamickPosted over 3 years ago@MojtabaMosavi Yeah I thought it was kind of big but I just didn't like all the empty space. I'll lower it a bit though. Thanks for the input. :)
0 - @dusanlukic404Posted over 3 years ago
Hi Flamick, well done!
- Add transition to buttons
- Center both horizontally and vertically main card
- Headings should be smaller on a mobile view
0@FlamickPosted over 3 years ago@dusanlukic404 I added a transition for smoother animation. Also, I'm not sure what you mean by centering the main card horizontally and vertically.
0@dusanlukic404Posted over 3 years ago@Flamick if you add hover state you just changed the state of that element when you're hovering over it with cursor. Transition is something like animation, so I suggest you to set this and you will see the difference: .btn { transition: all 300ms ease-in-out; }
- For centering that card you should avoid that vertical scrollbar. Use overflow: hidden; on body
Marked as helpful0@FlamickPosted over 3 years ago@dusanlukic404 I get what you mean by that now. I'll have to give that a try whenever I hop on next. Thank you.
0@dusanlukic404Posted over 3 years agoyou can try it now to see. Go on inspect and then add this style to buttons.
0
Please log in to post a comment
Log in with GitHubJoin 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