Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

single price grid component

@codesmiles

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Grace 27,670

@grace-snow

Posted

Hi

I recommend going back over this and spending more time to get it closer to the design.

Some tips to help:

  • Don't use pixel values or margins to position things. Use flexbox or css grid instead
  • pay attention to details like colors and border-radius
  • this challenge is designed to be suited perfectly for css grid, not flexbox for the grid itself
  • unless something reads as a paragraph, it shouldn't be one. use a list instead for why us list
  • You've got an extra h1 being rendered at the moment (probably a typo in the h1 tag causing this). Similar the div.white has an empty paragraph being rendered straight after it
  • don't use inline styles if you can style with a class
  • Notice the alignment in the design. Every grid child should have consistent padding
  • Use margin, not brs for vertical spacing
  • let the content have a max-width not percentage width

Hope this helps

Marked as helpful

2

@codesmiles

Posted

@grace-snow ya thanks

0

Please log in to post a comment

Log in with GitHub
Discord logo

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