Responsive price grid component built with html css flexbox

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  Hi, Andrew! 👋

  Congratulations on finishing your first Frontend Mentor challenge! 🎉 It's great that you made the site responsive using the mobile-first approach! Good job! 👍

  Regarding your question, when I did the challenge I wrapped the $29 on its own span. So, if you want to follow my approach then I recommend wrapping the $29 text with a span and the make the p element as the flex container to align the per month text center vertically.

  <p class="subscription__price">
    <span class="subscription__number">$29</span>
    <span class="subscription__month">per month</span>
  </p>
  

  You've used the correct HTML markup by using a paragraph tag as the main element to wrap those text. The text only makes sense if those are read together (or as one paragraph) by screen readers. So, you are on the right track. 👍

  One thing that is worth fixing is the background color for the Sign up link on the hover state. I believe it should be a lighter color than the original state. The black color is not match the color scheme of the page (at least in my opinion).

  That's it! I hope this information is useful! 😁

  12

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Andrew, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • to smooth also the bottom angle add overflow: hidden to container class
  • remove all margin from container class and body
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  00
• 

  T.Praveen•870

  @gwtpraveen

  Posted over 3 years ago

  hi Andrew Saganda, good job completing this challenge

  in terms of accessibility issues simply wrap all content between main tag and you should have one level one heading h1 tag

  keep up the good work...!

  02
• 

  Shashree Samuel•8,860

  @shashreesamuel

  Posted over 3 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the card needs a bit of margin from the top using margin-top.

  I hope this helps

  Cheers

  Happy coding 👍

  01
• 

  Prabhash Ranjan•2,540

  @besttlookk

  Posted over 3 years ago

  hi, Any time you need to center, you can use flexbox. Like to make your content center w.r.t screen, you can do this:

  body{
    display:flex;
    justify-content:center;
    aligned-items:center;
    min-height: 100vh;
  }
  

  Good luck

  Happy Coding

  00