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

@DanCargill

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
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this Dan! 👍

Here are a few tips for you after taking a look at your code:

  • I would recommend never using IDs for styling purposes. They're overly specific and also can't be reused on the page. Here are a couple of articles on it from CSS Tricks and Dev.to if you would like to dive in further.
  • Also, take a look into using HTML5 semantic structural elements in place of some div elements. They add much more meaning to your markup.
  • On mobile you're currently setting the height of each grid area, like below:
#container #top {
  height: 25%;
  margin-bottom: 5%;
}

Be careful when setting the height on elements as it can force them to be smaller than the actual height of the content within, which leads to the content overflowing the parent element. I would recommend just adding padding to the parent element and letting the height be dictated by the height of the content inside.

I hope those tips help. Keep up the great work!

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