Ping coming page responsive

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Tiago, congrats on finishing the challenge! good job with the layout and the responsiveness of your page, it looks great

  Regarding your question, just don't use the <strong> tag, use a <span></span> with a font-weight: 700 and it will get the job done, you can even use the font-weight: 700 in your current strong tag and it will also work.

  <strong> is supported on firefox, but there is something in your code thats clashing with it and its not letting the strong tag to work as it should

  Hope my answer helps you, if you have any questions don't hesitate to ask!

  Edit:

  Okay I found the problem, your <strong> is inheriting the font-weight: 300 from your <h1>, the best way to fix it is like I pointed you on the initial answer!

  0
• 

  Adriano•38,230

  @AdrianoEscarabotePosted about 2 years ago

  Olá Tiago José, tudo bem? Você realizou outro excelente trabalho neste desafio, gostei bastante do resultado do seu projeto, mas tenho algumas dicas.

  Analisei o seu código e percebi que você centralizou o conteudo usando padding e margin, e isso acabou gerando uma scrollbar em algumas resoluções e fez você usar alguns media query para não deixa o elemento quebrar em menores resoluções.

  Para resolver isso de uma maneira simples, podemos simplesmente colocar este código no body:

  body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }

  O body alinhara qualquer conteúdo no centro indepente da resolução. Mas para funcionar precisamos retirar alguns trechos de código:

  @media screen and (min-width: 768px) main { /* padding-top: 8rem; */ /* padding-bottom: 7.2rem; */ max-width: 64rem; }

  main { /* padding-top: 8.1rem; */ /* padding-bottom: 12rem; */ max-width: 32rem; /* margin: auto; }

  Agora falando sobre o problema que você relatou sobre a fonte. Pesquisei um pouco sobre e há vários porquês de estar diferente, mas eu consegui resolver com um simples código:

  strong { font-weight: bold; }

  Os códigos comentados foram retirados. O resto está ótimo! Espero que ajude... 👍

  0