Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Project

@rodrigotfdev

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Rodrigo, beleza? Parabéns pelo seu novo desafio!

O seu componente e todos os elementos estão muito bons, pra ficar perfeito você só tem que fazer uns ajustes pra deixar o card responsivo.

Dei uma olhada no seu código pra ver porque o container não estava responsivo e achei o motivo.

Você definiu max-width dentro do main mas na sectiondentro da div você colocou width que é um valor fixo, por isso o container não pode diminuir, geralmente quando você fizer um container desses, você pode controlar todos os elementos só com o main e nos outros elementos que estão dentro você só coloca o padding ou no máximo um max-width, jamais width porque ai ele fica blocado e não flexivel.

main {
    background-color: white;
    max-width: 350px;
    border-radius: 1rem;
}
main div.informations {
    width: 100%;
}

Marquei as linhas de código pra você ajustar ai.

Continue no foco!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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