Skip to content
Submitted almost 2 years ago

Responsive page with Flexbox

Brice THIBAULT•100
@Darkjulius
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

Hi there.

I did not encounter any difficulties in particular on the challenge itself. It's general in the sense that I have a lack of practice in HTML & CSS. For example: semantics and responsiveness.

I have a big doubt precisely about the responsive. What do you think ? Does he respond to the challenge? The code can definitely be improved. I am open to opinions.

I encountered a problem on the site URL. That is, the CSS was not taken into account with Google Chrome. I tested it on Edge, Opera and Firefox. It's functional. I tested it on Google Chrome in guest mode: It works. It must probably be from my Google account.

Thank you and have a good day.

Community feedback

  • Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    Olá, primeiramente, parabéns por concluir o desafio!

    Vou dar algumas dicas, espero que eu consiga te ajudar. Os dois "figure" que usou podem ser substituídos por:

    <div class="imagem"> <picture> <source media="(min-width: 1000px)" srcset="imagens/image-product-desktop.jpg" type="image/jpg"> <img src="imagens/image-product-mobile.jpg" alt="Gabrielle-Essence-Eau-De-Perfum-by-CHANEL"> </picture> </div>

    Deverá fazer as devidas adaptações no CSS para ser bem efetivo, ajustar os ".img-desktop" e ".img-mobile". Recomendo usar "px" no lugar de "rem" no "media-querie", pois se ajusta melhor em diversos aparelhos.

    No mais, está de parabéns, continue os estudos! para eventuais consultas pode usar meu repositório: https://github.com/LucasNCosta/projetos/tree/main/pratica/product-preview-card

    0

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