My first attempt at a media query, using the mobile first method. tell me how can i do better please.
@khaleed2002
Posted
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 helpful
@OliveiraRony
Posted
@khaleed2002 Thanks for the feedback
@correlucas
Posted
👾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 o height 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 helpful
@OliveiraRony
Posted
@correlucas Muito obrigado pelo feedback, Lucas! Vou fazer as alterações sugeridas e respostar a solução assim que possível. ;D
@correlucas
Posted
@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 helpful
@OliveiraRony
Posted
@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?
@correlucas
Posted
@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 helpful
@mouhibeddine
Posted
how did you know the perfect card sizing
@OliveiraRony
Posted
@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
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
