Design comparison
Solution retrospective
My first attempt at a media query, using the mobile first method. tell me how can i do better please.
Community feedback
- @khaleed2002Posted over 2 years ago
perfect card sizing but why the price on (4 number) is not showing well? and a lot of size on the end of the description also one other thing on the font of (Gabrielle ...) make it Bold it will be better I hope you can fix that issues
Marked as helpful1@OliveiraRonyPosted over 2 years ago@khaleed2002 Thanks for the feedback
1 - @correlucasPosted over 2 years ago
👾Fala Rony, beleza? Parabéns pelo seu desafio!
O componente ficou muito bom e está funcionando quase perfeitamente, tem só uns ajustes que você pode fazer pra deixar ele totalmente responsivo.
Por exemplo, quando a tela começa a diminuir o texto começa a vazar o container porque você deixou o
height
fixo e ai ele não consegue crescer mais pra ajustar o texto, pra resolver isso você pode deixar oheight
deletado, já que a altura do container vai ser determinada pelo padding dos elementos que estão dentro. Olha o código abaixo:main { background-color: hsl(0, 0%, 100%); display: flex; width: 600px; /* height: 450px; */ border-radius: 10px; justify-content: center; }
Outra coisa que você pode fazer é usar
<picture>
ao invés de usar<img>
ai você já pode determinar as duas imagens mobile desktop dentro da mesma tag sem ter que mexer no css ou media query.Espero que te ajude e continue codando!
Marked as helpful1@OliveiraRonyPosted over 2 years ago@correlucas Muito obrigado pelo feedback, Lucas! Vou fazer as alterações sugeridas e respostar a solução assim que possível. ;D
1@correlucasPosted over 2 years ago@OliveiraRony Boa, fico feliz em ouvir isso, não precisa repostar, dá pra atualizar essa mesma solução.
é so ir em solution > solution hub > update solution
ai voce atualiza o slider com a comparacao do desafio / referencia.
Toda vez que você atualiza o repositorio no Github automaticamente o live site atualiza tbm, entao é só dar um update aqui msm.
Marked as helpful1@OliveiraRonyPosted over 2 years ago@correlucas Muito obrigado por outra informação valiosa, Quanto ao uso da tag <picture> que você mencionou, pode me explicar como eu poderia fazer isso de uma forma simples? Eu conseguiria só usando ela, posicionar a imagem na parte de cima do card?
0@correlucasPosted over 2 years ago@OliveiraRony Olha o exemplo abaixo, a imagem que ta dentro de <img> é a principal e vai aparecer primeiro, ja a outra com <source media..> é a imagem secundaria que vai aparecer depois de 700px, ai é só você mudar a informação que tá la dentro e linkar as imagens.
<picture> <source media="(max-width:700px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
Aqui a documentação caso você queira ler:
https://www.w3schools.com/tags/tag_picture.asp
Marked as helpful1 - @mouhibeddinePosted over 2 years ago
how did you know the perfect card sizing
1@OliveiraRonyPosted over 2 years ago@mouhibeddine I didn't know, tried untill I got it. Try putting a design window over your project, and try to get as close to the card sizing as possible. That's the way I got
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