Usei o metodo de flex box, para aplicar a responsividade
Design comparison
Solution retrospective
Consegui adaptar os site para todos os dispositivos
What challenges did you encounter, and how did you overcome them?Encontrei dificuldade para alinhar os "box" de conteudo da maneira que foi pedida, mas solucionei unindo 2 boxes, e deixando 2 separados.
What specific areas of your project would you like help with?Alguma outra maneira de alinhar os itens
Community feedback
- @R3ygoskiPosted 6 months ago
Olá Vinício, parabéns pela conclusão de mais um projeto. Ficou muito bom, meus parabéns.
Sobre a parte de alinhar os objetos, o melhor para esse desafio é utilizar o
grid
, isso porque você precisava posicionar os elementos tanto na vertical quanto horizontal, e sempre que precisar desse alinhamento bidirecional, o recomendado é ogrid
, já oflex
é unidirecional .O site ele não está responsivo para todos os dispositivos, ele fica um pouco quebrado em 320px, e em telas mobile, o seu card de calculator, acaba por ficar em cima do card de supervisor. Se você remover o
position: absolute
do seletor.for
, ele seguirá a linha de forma correta.E se quiser deixar seu HTML mais semântico, você poderia trocar as
<div>
de cada card por<article>
, pois esses conteúdos são autoexplicativo e independentes.E novamente, meus parabéns, continue praticando e se aprimorando, ficou boa sua resolução do desafio. Caso tenha ficado alguma duvida por favor, comente abaixo que tentarei ajudar da melhor forma possível.
2@pRicard0Posted 6 months ago@R3ygoski Não acha que
<section>
seria melhor do que article? Eles não são completamente independentes e fazem parte de um todo. Eles estão inseridos dentro do contexto da página. É tudo um grupo de características que não podem ser dissociadas e só fazem sentido quando estão juntas. O que acha?1@R3ygoskiPosted 6 months agoOlá @pRicard0, na verdade eu acho que o mais correto é realmente
<article>
, isso porque se formos reparar, eles não dependem do contexto da página.Isso porque cada card desse descreve sobre uma funcionalidade específica e de forma autoexplicativa, isso é, fazem sentido por si só. Se removêssemos todo o resto da página e deixássemos apenas esses cards, eles ainda fariam sentido. E isso vale para os outros
Um exemplo disso seria o primeiro card que é o Supervisor, só com ele você já consegue entender que ele representa uma funcionalidade de supervisão, isso por causa da descrição, título e imagem.
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