Submitted over 1 year ago

Pure HTML CSS Single price grid component solution

@tburette

A solution to the Single price grid component challenge

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.

Code

Please log in to post a comment

Community feedback

solvman•1,650
@solvman
Posted over 1 year 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 helpful
Olaniyi Ezekiel•7,580
@Ezekiel225
Posted over 1 year 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 helpful

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