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 using HTML and CSS

chrisdh80 70

@chrisdh80

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all, still pretty new to this so any feedback much appreciated.

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Your site looks pretty good. Some things that stand out to me:

  • I see that you used display: grid. If you choose to use this you should use place-items: center to center the box as opposed to justify-content: center and align-items: center, which are commonly associated with display: flex
  • for the third box, the "Why Us" box, you should use an unordered list to list out the items not line breaks. So it should look something like this:
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
  • one last thing I noticed is that when the window size is small, a part of the box gets cut off. So I suggest that you add in media query values to switch your site into a mobile-friendly layout. To read more about media queries and responsiveness, you can read this and this.

Hope you find this feedback userful 👍

Marked as helpful

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