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

Css and mobile first

#accessibility
Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I know I still need to improve a lot. But I have gained a lot of confidence doing these challenges. And with the help of the community I have improved. Thank you all.

Community feedback

Lucas 👾 104,580

@correlucas

Posted

👾Oi de novo Tathiany , tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução aqui e está praticamente perfeita, só tá faltando a versão mobile. Aqui minhas dicas:

max-width: 760px pra deixar o containr responsivo e ajustando com a tela

.container__articles {
    display: flex;
    max-width: 760px;
    max-height: 100%;
    flex-direction: column;
}

Media query pra deixar o container em vertical

@media (max-width: 750px) {
.container__articles {
    display: flex;
       flex-direction: column;
}
}

👋 Espero ter ajudado e continue no foco!

Marked as helpful

0

Adriano 33,990

@AdrianoEscarabote

Posted

Ola tathy, tudo bem?

Você realizou um bom trabalho neste desafio, gostei muito da responsividade do projeto. Tenho algumas dicas que acredito que você pode gostar:

1- Os níveis de título devem aumentar apenas em um. clique aqui

2- A responsividade do seu projeto ficou boa, mas entre 375px e 780px o layout está quebrando, aconselho você a colcar outro media query ou adaptar o layout para que isso não aconteça.

É só isso mesmo, o resto está ótimo! Parabéns Espero que ajude... não esqueça de marcar como útil 👍

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