HTML + CSS interactive page

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Oi Bernardo, tudo bem? Parabéns pelo desafio!

  Aqui um tutorial explicando bem a fundo o tema de responsividade: https://www.youtube.com/watch?v=H91DhKPjhPk ou https://www.youtube.com/watch?v=WcGPSeuJDJ0

  Quando esse card vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:

  @media (max-width: 350px) {
  .plan {
      display: flex;
      max-width: 100%
      align-items: center;
      justify-content: center;
      padding-bottom: 3em;
      flex-direction: column;
  }
  }
  
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  1

  ---

  

  Bernardo Hollmann•250

  @BernardoHollmannPosted about 2 years ago

  @correlucas Obrigado pelas dicas, Lucas!

  Realmente, a parte dos preços estava "embolando" e, com a sua ajuda, melhorou bem o visual!

  0
• 

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  Hi BernardoHollmann, how are you?

  I really liked the result of your challenge, the responsiveness of the project was good, but if you want to go deeper into media-query I have a link that was very important for me to understand about each media query function. When to use it, why to use it and not clutter the media-query code:

  Click here ---> here

  Hope it helps... 👍

  1

  ---

  

  Bernardo Hollmann•250

  @BernardoHollmannPosted about 2 years ago

  @AdrianoEscarabote Thanks for your comment, Adriano! Very interesting article!

  1

  

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  @BernardoHollmann no problem, keep coding!

  0

  

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  @BernardoHollmann no problem, keep coding!

  0