Rating Component with Vanilla JS & @media

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Fala Paula, tudo bem? Parabéns pelo desafio!

  Acabei de ver sua solução e vi que vc usou algumas media queries pra fazer o container ajustar de acordo com a largura da tela, nesse desafio vc nao precisa usar media query, basta fazer o container e o botão ficar responsivo usando max-width. A diferença entre width e max-width é que width é uma largura fixa e max-width é uma largura maxima que pode diminuir, que é o ideal pra esse desafio, aqui embaixo eu te mando o codigo pra consertar a responsividade do card:

  Antes de tudo remova as media queries e adicione max-width em todas partes onde tem width:

  NAO PRECISA USAR HEIGHT A ALTURA É AUTOMATICA E CRESCE DE ACORDO COM OS ELEMENTOS DENTRO E O PADDING:

  
  
  .modal {
      max-width: 320px;
      /* height: 360px; */
      border-radius: 15px;
      background: radial-gradient(98.96% 98.96% at 50% 0%, #232a34 0%, #181e27 100%);
      padding: 24px 24px 32px;
  }
  
  @media (min-width: 412px)
  .submit-btn {
      max-width: 100%;
      font-size: 15px;
      line-height: 19px;
      transition: all 500ms;
  }
  .submit-btn {
      max-width: 100%;
      height: 45px;
      border-radius: 23px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      text-transform: uppercase;
      letter-spacing: 2px;
      background-color: #fc7614;
  }
  
  

  👋 Espero ter ajudado e continue no foco!

  0