Design comparison
Solution retrospective
I don't know why I couldn't use the width as 100% of the button in the card-2. The button just overflew it, so I had to use a 92%, wich I know its not recommended.
I had another issue regarding the h4 tag of the card-1. I separated the two tags, according to the given layout, but when I went to the mobile view perspective, both were not as the refered layout. So, I switched the display of the h4 to inline, so it could be placed in the same line. However, I don't know how to give a line high for an inline element. So, I left it as was.
Community feedback
- @correlucasPosted about 2 years ago
👾Oi Bernardo, tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:
Seu html está funcionando, mas você pode melhorá-lo usando tags semânticas e substituir as divs, por exemplo, a div principal que recebe todo o conteúdo pode ser envolvido com
<main>
ou section, já os cards você pode substituir o<div>
que envolve cada cardcom<article> desta forma você irá envolver cada bloco de elemento com a melhor tag. Lembre-se
<div>` é apenas um elemento de bloco sem nenhum significado.Aqui um guia com todas tags semanticas: https://www.w3schools.com/TAgs/default.asp
👋 Espero ter ajudado e continue no foco!
Marked as helpful1@BernardoHollmannPosted about 2 years ago@correlucas Oi Lucas! Muito obrigado pelas dicas! Vou procurar usar as tags mais corretamente para os próximos desafios
0 - @hyrongennikePosted about 2 years ago
Hi @BernardoHollmann,
Congrats on completing the challenge
I was able to use 100% for the button and it worked. You can add the media query below to stack the sections on mobile.
@media (max-width: 576px) { main > div { padding: 2rem !important; } main { display: block; } }
Hope this is helpful, let me know if you have any other questions.
Marked as helpful1
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