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

Mobile-first solution using CSS Flexbox and Media Queries

#accessibility

@Philipessj1

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


Any feedback to improve the code are welcome!

Community feedback

Lucas 👾 104,580

@correlucas

Posted

👾Fala Philipe Da Motta Mello, tudo bem? Parabéns pelo seu primeiro desafio e seja bem vinda a comunidade do Frontend Mentor!

O seu componente está perfeito, mas se você quiser melhorar ainda mais, você pode usar a tag <picture> para simplificar seu código e segurar as duas imagens dentro do html. Usando essa tag, você nem precisará de media query para mudar de uma imagem para outra dependendo do dispositivo (mobile ou desktop), basta configurar tudo dentro do html.

Caso você ainda não conheça essa tag, aqui na documentação explica certinho como configurá-la: **https://www.w3schools.com/tags/tag_picture.asp **

👋 Espero ter ajudado e continue no foco!

Marked as helpful

1
Suleman 750

@legion40216

Posted

I think its good just the mobile break point needs adjustments

Marked as helpful

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