Design comparison
Solution retrospective
Fun project. I didn't know what should happen if the user clicks the same option twice so i just did nothing.
Community feedback
- @correlucasPosted about 2 years ago
👾Fala Paula, tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e vi que vc usou algumas media queries pra fazer o container ajustar de acordo com a largura da tela, nesse desafio vc nao precisa usar media query, basta fazer o container e o botão ficar responsivo usando
max-width
. A diferença entrewidth
emax-width
é que width é uma largura fixa emax-width
é uma largura maxima que pode diminuir, que é o ideal pra esse desafio, aqui embaixo eu te mando o codigo pra consertar a responsividade do card:Antes de tudo remova as media queries e adicione
max-width
em todas partes onde temwidth
:NAO PRECISA USAR
HEIGHT
A ALTURA É AUTOMATICA E CRESCE DE ACORDO COM OS ELEMENTOS DENTRO E O PADDING:.modal { max-width: 320px; /* height: 360px; */ border-radius: 15px; background: radial-gradient(98.96% 98.96% at 50% 0%, #232a34 0%, #181e27 100%); padding: 24px 24px 32px; } @media (min-width: 412px) .submit-btn { max-width: 100%; font-size: 15px; line-height: 19px; transition: all 500ms; } .submit-btn { max-width: 100%; height: 45px; border-radius: 23px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 700; font-size: 14px; line-height: 18px; text-transform: uppercase; letter-spacing: 2px; background-color: #fc7614; }
👋 Espero ter ajudado e continue no foco!
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