Skip to content
Submitted about 2 years ago

HTML + CSS Grid layout system page

Bernardo Hollmann•250
@BernardoHollmann
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I don't know why I couldn't use the width as 100% of the button in the card-2. The button just overflew it, so I had to use a 92%, wich I know its not recommended.

I had another issue regarding the h4 tag of the card-1. I separated the two tags, according to the given layout, but when I went to the mobile view perspective, both were not as the refered layout. So, I switched the display of the h4 to inline, so it could be placed in the same line. However, I don't know how to give a line high for an inline element. So, I left it as was.

Community feedback

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

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

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

    Seu html está funcionando, mas você pode melhorá-lo usando tags semânticas e substituir as divs, por exemplo, a div principal que recebe todo o conteúdo pode ser envolvido com <main> ou section, já os cards você pode substituir o <div> que envolve cada cardcom <article> desta forma você irá envolver cada bloco de elemento com a melhor tag. Lembre-se <div>` é apenas um elemento de bloco sem nenhum significado.

    Aqui um guia com todas tags semanticas: https://www.w3schools.com/TAgs/default.asp

    👋 Espero ter ajudado e continue no foco!

    Marked as helpful
    1
    Bernardo Hollmann•250
    @BernardoHollmannPosted about 2 years ago

    @correlucas Oi Lucas! Muito obrigado pelas dicas! Vou procurar usar as tags mais corretamente para os próximos desafios

    0
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @BernardoHollmann,

    Congrats on completing the challenge

    I was able to use 100% for the button and it worked. You can add the media query below to stack the sections on mobile.

    @media (max-width: 576px) {
main > div {
    padding: 2rem !important;
}

main {
    display: block;
}
}

    Hope this is helpful, let me know if you have any other questions.

    Marked as helpful
    1
    Bernardo Hollmann•250
    @BernardoHollmannPosted about 2 years ago

    @hyrongennike Thanks for the tip!

    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