Pricing Card challenge using html, css and js

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @ubongedem78, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.

  The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center.

  body {
      padding: 40px;
      font-size: 16px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  ubongedem78•30

  @ubongedem78Posted about 2 years ago

  @correlucas thank you so much

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi there! 👋

  Before diving into styling, we need to get the HTML right first.

  • Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users can get confused.
  • I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn more about headings.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • Always specify the type of the button. In this case, set the type of them as type="button". It will prevent the button from behaving unexpectedly.

  Now, for the styling:

  • Use body element to set font family, font size, and font weight. The html element should be used for setting text styling because it can overwrite the user's browser's settings.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.
  • Try to make the site looks closer to the design. Currently, it is different from the original design.

  For JavaScript, I recommend removing it. There's no need to add JavaScript when the site does not need it. 🙂

  That's it! I hope this helps! 👍

  Marked as helpful

  0

  ---

  

  ubongedem78•30

  @ubongedem78Posted about 2 years ago

  @vanzasetia Thank you so much, will make these changes.

  1
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi ubongedem78, how are you?

  Welcome to the front-end mentor community. I really liked the result of your project, but I have some tips that I think you will like:

  1- Document should have one main landmark, you could have put all the content inside the main tag click here

  2- Page should contain a level-one heading, you could have changed h2 to h1 click here

  3- Heading levels should only increase by one click here

  I noticed that the content was not centered to fix this I did the following:

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

  To make the mobile version of the project you can use the grid I'll leave a link if you don't know: click here

  The rest is great! Hope it helps... 👍

  Marked as helpful

  0

  ---

  

  ubongedem78•30

  @ubongedem78Posted about 2 years ago

  @AdrianoEscarabote Thank you so much, will make these changes!

  1