Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Ping coming page responsive

@tiago-jv0

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

David 8,000

@DavidMorgade

Posted

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 34,090

@AdrianoEscarabote

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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