Design comparison
Solution retrospective
The most difficult thing is replace image desktop for image mobile
Community feedback
- @VitorMagnagoPosted almost 2 years ago
Olá Rafael, tudo bem? Ainda estou iniciante, mas acho que posso te ajudar. Vi que você fez duas estruturas HTML, uma para cada versão, não tem necessidade, a estrutura é única, depois dentro do arquivo CSS você vai adequar essa estrutura para cada uma das versões.
-
O problema da mudança de imagem entre as versão você pode utilizar a tag
<picture>
com ela você consegue especificar qual imagem irá ser utilizado determinado layout. Nesse site você consegue aprender muita coisa sobre imagens responsivas, https://web.dev/learn/design/picture-element/ -
Quando utiliza media queries dentro dela você só coloca as regras que irão ser diferentes, ou seja, específica para o determinado layout, o que é comum entre eles você deixa fora mesmo.
Marked as helpful0@rafaelmarquesRMPosted almost 2 years ago@VitorMagnago Muito obrigado por me avisar! Eu realmente não conhecia este recurso. Pesquisei sobre como alterar o SRC no CSS e não obtive nenhum resultado. Nem imaginava que daria para fazer isso no próprio HTML.
1 -
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