Design comparison
Solution retrospective
I found media query and the responsive part of the project to be the most difficult, but it became easier as i read through MDN docs. I am unsure of the spacing and responsiveness because I tested the page in fullscreen on a laptop and on a bigger monitor, and the "add to cart" button got tucked under the bottom of the container, but it did not on the laptop. Is there anything a could watch out for the next HTML/CSS project?
Community feedback
- @correlucasPosted over 2 years ago
👾Fala Arthur, analisei essa sua solução aqui também!
1.Aqui acontece a mesma coisa do outro desafio, a questão do
height
e omax-width
bloqueando o container de ser responsivo, só deletar o valor pra altura e trocar osmax-width
..container { max-width: 600px; /* height: 450px; */ background-color: white; overflow: hidden; border-radius: 8px; display: flex; }
2.Pra resolver a questão da imagem, se você usar a tag
<picture>
dá pra colocar as duas imagens dentro e declarar quando uma deve trocar pela outra, sem usarmedia query
. Da uma olhada na aqui pra ver como montar essa tag:https://www.w3schools.com/tags/tag_picture.asp
3.A imagem não está pegando 100% da coluna porque você definiu a altura dela, tem que colocar ela dentro de uma div e declarar
min-height: 100%;
desse jeito ela pega altura da vid.4.Evita usar
id
porque é um seletor muito especifico, melhor usarid
pra formulários e coisas com Javascript, pra resolver essas coisas melhor só usarclasse
mesmo bro.Espero ter ajudado e continue mandando bala nos projetos. Tmj
Marked as helpful0@Artur-NeriPosted over 2 years ago@correlucas, Como você viu, esse aqui ficou bem bagunçado. Obrigado pelo feedback, refatorei o arquivo salvo no meu pc com essas ideias e funciona igual nos meus dois computadores. Só não implementei a tag picture, vou estudar um pouquinho sobre ela, tenho certeza que vai ser um recurso útil na minha caixa de ferramentas. Vlw, dnv!
0
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