Single price grid component

Community feedback

• 

  Kristina Radosavljevic•380

  @KristinaRadosavljevicPosted about 2 years ago

  Hi and congrats on completing the challenge :)

  I think I have a couple of suggestions that you might want to consider:

  • 1440px is way too much for a media query breakpoint for this project. I understand you did a mobile-first approach which is perfectly fine, but I would put the breakpoint much sooner (maybe around 600px or something - whenever the layout breaks and the columns start to look stretched out).
  • You have a great start with the button, but it could use a bit more work. Most notably, you should have some sort of hover effect on it, just to indicate to the user that it's clickable (maybe a background color change, or simply using cursor: pointer; would do the trick). I also noticed you used margins to position the button and it starts to look displaced after a certain point (around 400px and smaller) - might be a better idea to either stretch it so that it covers the entire width of the parent element or to use margin-left: auto; and margin-right: auto; to position it at the center or (and this is probably easiest) not to use left and right margin on it at all. And speaking of the button, since clicking it would presumably take you to another page (where you can sign up), I guess the right HTML element to use would be <a> and not <button>.
  • I noticed in your code that you used a mix of px and rem units, which I guess is not the best practice. You should stick to one unit for consistency, and my suggestion is to go with rem since it's the responsive one :)
  • One last thing, and this one is pretty tiny - I think the paragraph in the "Why Us" section is actually supposed to be a list, just without the bullet points. It is pretty packed in the design so I see how that could be missed.

  Sorry for the longish feedback, but I do hope some of this helps :) Cheers!

  Marked as helpful

  1

  ---

  

  rykryslr•100

  @chigyongPosted about 2 years ago

  @KristinaRadosavljevic Thank you for reviewing my code ma'am. I will improve it next time :)

  1