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

Responsive QR Code Component Main

@rafaelmarquesRM

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The most difficult thing is replace image desktop for image mobile

Community feedback

@VitorMagnago

Posted

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 helpful

0

@rafaelmarquesRM

Posted

@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 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