Responsive Single Price Grid Component Using SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Osman! 👋

  Here are some recommendations for improvements.

  • To make the card in the middle of the page, you can make the body element as a flexbox container.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  • Use rem unit for margin instead of percentage unit. It can lead to unexpected result on wide and tiny screen sizes.
  • 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.
  • I recommend adding rel="noopener" to any anchor tags that have target="_blank". It helps protect users of legacy browsers. I suggest reading the web.dev article to learn more about this.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Osman Nuri ERDOĞAN•330

  @osmannurierdoganPosted about 2 years ago

  Hi @vanzasetia,

  Thanks for your recommendations. I will check them and update my solution.

  Take care, have a good day...

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @osmannurierdogan No problem! Have a nice day too! 😄

  0