Rating page

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Demyttenaere, congratulations for your new solution!

  🎨 Here’s some tips to improve your component design:

  You tried to align the component using margins and position relative but this make this task really tricky and hard control all the content. My advice for you is to use flexbox to create this alignment. First thing you've to do is to add min-height: 100vh to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then add display: flex; align-items: center; justify-content: center; to make the alignment:

  REMOVE ALL THE MARGINS TO MAKE THE CORRECT ALINGMENT:

  .page1, .page2 {
      background-color: hsl(213, 19%, 18%);
      border-radius: 20px;
      /* margin-top: 200px; */
      /* margin-left: 15px; */
      margin-right: 15px;
  }
  
  @media screen and (min-width: 1000px)
  .page1, .page2 {
      width: 350px;
      /* margin: auto; */
      /* margin-top: 200px; */
  }
  

  THE CORRECT ALIGNMENT:

  body {
      min-height: 100vh;
      background-color: hsl(216, 12%, 8%);
      font-family: 'Overpass', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  demy•190

  @DemyttenaerePosted about 2 years ago

  Hi @correlucas,

  Thank you for this comment, it will help me in my next challenges!

  Good coding!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Demyttenaere,

  Good job on the challenge Just a suggestion but I'm still able to click the button without selecting a rating and the result on the thank you card is empty maybe just disable the button until a rating is selecting or set a default rating of 1.

  Marked as helpful

  0

  ---

  

  demy•190

  @DemyttenaerePosted about 2 years ago

  Hi @hyrongennike !

  Thanks for your feedback!

  0