Pure HTML CSS Single price grid component solution
Design comparison
Solution retrospective
What's a good CSS reset file? In my projects I start thinking I don't need one then add bits and pieces of resets as I progress.
What's a clean way to have a smooth transition between the mobile design and the desktop design. for the main size I used width: clamp(calc(500px * 0.85), 66%, 60rem);
. 500px is the breakpoint and 0.85 is the width of the main element. It ensures that the width doesn't suddenly 'pop' to a smaller size when transitioning from mobile to desktop.
Community feedback
- @solvmanPosted 10 months ago
Hi @tburette π
Very well done! π
Regarding CSS reset, I really like Modern CSS Reset by Josh Comeau. I agree with you; I start with whatever resets I need for the project and don't pollute my code base with unused stuff.
I hope you find it useful π
Marked as helpful1@tburettePosted 10 months agoHey @solvman Interesting reset.
line-height: 1.5
seems a tad too much to apply globally.I didn't know about the declaration
isolation: isolate;
that creates a stacking context. I read articles about stacking context but somehow they never mentioned that property.1 - @Ezekiel225Posted 10 months ago
Hello there π.
Good job on completing the challenge !
Your project looks really good!
I have suggestions about your code that might interest you.
Try adding the below codes to the body element
body { min-height: 100vh; justify-content: center; display: flex; align-items: center }
I hope it helps!
Other than that, great job!
Happy coding.
Marked as helpful1@tburettePosted 10 months agoYou're right, @Ezekiel225 . It's be better if the content was centered vertically.
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