Submitted 8 months ago

Pure HTML CSS Single price grid component solution

Thomas Burette• 190

@tburette

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

solvman• 1,670

@solvman

Posted 8 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 helpful

Thomas Burette• 190

@tburette

Posted 8 months ago

Hey @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.

Olaniyi Ezekiel• 7,600

@Ezekiel225

Posted 8 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 helpful

Thomas Burette• 190

@tburette

Posted 8 months ago

You're right, @Ezekiel225 . It's be better if the content was centered vertically.

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