👩‍💻 Order summary card solution

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala Carolina, parabéns pela sua nova solução!

  Dei uma olhada no seu site e no código, o design está simplesmente perfeito, você reproduziu todos elementos do desafio. Muito bom!

  Em relação a responsividade, o card em si já é responsivo, então nem teria necessidade desses media queries, já que o cartão diminui de acordo com a tela naturalmente, você só teria que corrigir o width do main com max-width. Lembre-se sempre que você quiser que algum elemento seja flexivel, ele tem que ser sempre max-width ou min-width porque se você usar width ele fica um elemento invariável que não estica e nem diminui.

  Fiz umas mudanças no seu código e deixei aqui embaixo, a primeiro é sobre responsividade e a segunda é um media query pra jogar os elementos da parte do preçoem linhas diferentes quando o cartão começa a ficar muito estreito.

  main {
      margin: 24px;
      max-width: 450px;
      border-radius: 20px;
      background-color: var(--n1);
  }
  

  @media (max-width: 320px) {
  .content .price {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  }
  

  Parabéns e continue nesse foco Caroline!

  Marked as helpful

  1

  ---

  

  Caroline Amorim•50

  @CarolAmorimPosted about 2 years ago

  Oi Lucas, tudo bem?

  Obrigada pelo feedback, a dica sobre o max-width vai ser muito útil, vou aplicá-lo neste código e nos futuros também.

  0

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @CarolAmorim Se você quiser um artigo mais aprofundado sobre assunto, vou te compartilhar um link, li esses dias porque eu estava curioso sobre as diferenças:

  https://blog.prototypr.io/what-even-is-the-difference-between-width-and-max-width-8f37b282c7f1#:~:text=This%20is%20a%20simple%20way,the%20browser%20use%20max%2Dwidth.

  Marked as helpful

  1

  

  Caroline Amorim•50

  @CarolAmorimPosted about 2 years ago

  @correlucas Vlw pelo artigo!! consegui entender.

  1