Responsive interactive rating component

Community feedback

• 

  Purnima Kumar•390

  @purnimakumarrPosted over 2 years ago

  Hey Kapline, Congrats on completing your first project involving JavaScript 🙌

  I would suggest two changes:-

  • You should re-position the <footer></footer> section. As right now, it seems to overlap the rating component in desktop design. I would suggest not to position the footer using absolute. You can do it by using Flexbox. I see you are using Flexbox to center the contents in body horizontally and you have specified a margin-top on the body to center the contents vertically. However, you can center the contents of body both horizontally and vertically by using Flexbox only. You only have to add justify-content: center css property to the body tag. This is a flexbox property which aligns the content vertically when the flex-direction: column is set. And, you can add gap: 24px to the body tag to have some spacing between rating card and footer. This is what your CSS code would look like:-

  body {
      height: 100%;
      font-family: 'Overpass', sans-serif;
      background-color: var(--very-dark-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 24px;
  }
  
  .attribution {
      font-size: 15px;
      text-align: center;
      color: var(--light-grey);
  }
  

  • Also you should put the JS script outside the main section. It should be put at the very last in the code and before body is closed.

  Marked as helpful

  0