Skip to content
Submitted about 2 years ago

Responsive card with flexbox

Adriel Santos Costa•130
@adriel-mp3
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • Upon reaching a certain width, I chose to remove the music icon, as it was just a decoration.
  • I would like to know if there could be a better way to position the elements or if there is still a way to improve my HTML

"The motivation is what gets you started. The habit is what keeps you going on."

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Oi Adriel Santos, tudo bem? Parabéns pelo desafio!

    Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

    Para tornar sua solução ainda melhor e mais responsiva, você pode criar uma media query para quebrar os elementos na section dos preços/planos e colocar cada conteúdo em uma linha diferente, economizando espaço para dispositivos de baixa resolução.

    @media (max-width: 350px) {
.card-plan {
    margin: 0px 50px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: hsl(228,100%,98%);
    border-radius: 10px;
    flex-direction: column;
}
}

    👋 Espero ter ajudado e continue no foco!

    0

Please log in to post a comment

Log in with GitHub

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