Design comparison
Solution retrospective
Had to ask on slack
for help w/ image on grid desktop
Community feedback
- @correlucasPosted about 2 years ago
👾Oi Paula, tudo bem? Parabéns pelo desafio!
Eu usei
grid-template-columns: 1fr 1fr;
e dividiu certinho as duas colunas sem stress.main { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "logo hero" "text hero"; gap: 32px 10vw; margin-left: 12vw; }
Eu te recomendo fortemente aquele tutorial do Kevin Powell (testiomial section) e o curso da Origamid que tinha te falado antes, simplicou demais usar grid e isso pq eu nem sei usar as propriedades mais pesadas tipo
grid area
e comcalc
.👋 Espero que essas dicas tenham sido úteis e continue codando!
1 - @romila2003Posted about 2 years ago
Hi Paula,
Congratulations 🎉 for completing this challenge, the page and form looks great and is responsive.
- On desktop, I noticed that there is an overflow on the x-axis and the y-axis. To prevent this, you can give it the
overflow
property and set it tohidden
. - In mobile screen, the position of the text within the input field, is centered in the middle. To position the placeholder to the left, you can add
text-align: left
and keep the padding. - Your button is missing the
type
attribute which should be set tosubmit
since this is a form.
Overall, great attempt and wish you the best for your future projects 👍.
0 - On desktop, I noticed that there is an overflow on the x-axis and the y-axis. To prevent this, you can give it the
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