Design comparison
Solution retrospective
I tried to make the site as close as possible to the design, however, i had some troubles with firefox because the browser does not render font-weight the same way chrome does, i would be really glad if someone share how to solve this issue.
Community feedback
- @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 afont-weight: 700
and it will get the job done, you can even use thefont-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 shouldHope my answer helps you, if you have any questions don't hesitate to ask!
Edit:
Okay I found the problem, your
<strong>
is inheriting thefont-weight: 300
from your<h1>
, the best way to fix it is like I pointed you on the initial answer!0 - @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
emargin
, 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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord