Frontend Mentor - Order summary card

Community feedback

• 

  Lucas 👾•104,280

  @correlucasPosted over 2 years ago

  👾Hello Gustavo de Camargo, congratulations for your new solution!

  O design do seu componente ficou praticamente perfeito, nesse caso só ficou faltando a responsividade, a maioria dos elementos que você definiu a largura estão como width pra consertar isso você precisa subistituir max-width pra deixar o container se ajustar de acordo com a tela. Lembre-se se você quiser que um elemento seja responsivo não use width prefire sempre max-width ou min-width dependendo do caso.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Adriano•42,740

  @AdrianoEscarabotePosted over 2 years ago

  Fala Gustavo, de boa?

  Mandou muito neste desafio! Tenho algumas dicas para você:

  1- Adicionar um padding lateral e vertical no body para que quando a resolução estiver menor o conteúdo não ficar batendo na borda.

  2- Adicionar um media query mudando as unidades de medida para alguma que seja relativa, como porcentagem, por exemplo.

  É só isso mesmo, O resto está ótimo. Parabéns

  espero que ajude... não esqueça de marcar como útil. 👍

  Marked as helpful

  1
• 

  Gustavo de Camargo Campos•200

  @themegazordPosted over 2 years ago

  Eu cheguei a colocar o media query, será que não funcionou no Netlify?

  @media screen and (max-width: 450px) {

  body {
      background-image: url('../../images/pattern-background-mobile.svg');
      background-repeat: no-repeat;
      background-size: 100vw;
  }
  
  .content {
      width: 350px;
  }
  

  }

  0