Skip to content
Submitted about 2 years ago

Product Preview Component

Maria Luisa Durães•160
@MariaLuisaMD
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This was the first challenge I applied concepts of responsiveness, but I didn't use mobile-first. That's something I intend to try next. I had some difficulties in the case of the image, I do not know if the best was to declare a background image to solve the challenge. After having already completed 90% of the work I went to search the images and saw display: none and <picture> , which would be better to use? The <picture> allows you to declare the screen size, I would love some tips on this! I also appreciate any other comment on the code

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Oi Malu, tudo bem? Parabéns pelo seu desafio e reflexões acerca das escolhas, bem bacana!

    Eu vi seu código aqui e gostei muito, você fez tudo certinho, usou <main> pra englobar tudo, usou rem a única coisa que você poderia ter melhorado é ter usado a imagem com <picture> ao invés de importar pelo css.

    Vou te explicar como funciona a <picture>:

    Essa tag é muito boa porque ela permite você inserir vários tamanhos da mesma imagem e indicar em qual largura de tela ela deveria mudar a image. Por isso que esse desafio tem duas fotos diferentes, mobile e desktop. Você manipula essa tag inserindo as duas <img> dentro da <picture> e indicando os pontos de troca de image, olha o exemplo abaixo:

    <picture>
  <source media="(max-width:650px)" srcset="images/image-product-mobile.jpg">
  <img src="images/image-product-mobile.jpg" alt="Perfum" style="width:auto;">
</picture>

    A imagem do perfume vai trocar quando a tela ficar menor que width: 650px; ou seja mobile.

    Se você quiser ler a documentação, pode dar uma olhada aqui: https://www.w3schools.com/tags/tag_picture.asp

    Espero ter conseguido te dar uma informação útil e caso você não tenha entendi algo, fique livre pra perguntar, ok?

    Marked as helpful
    1
    Maria Luisa Durães•160
    @MariaLuisaMDPosted about 2 years ago

    Vou dar uma olhada na documentação para entender melhor a tag <picture>, muito obrigada! Ela é realmente bem útil para conseguirmos adequar a imagem para o tamanho ideal de tela, isso foi algo que me deixou com muita dúvida durante o desafio

    1

Please log in to post a comment

Log in with GitHub

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