Skip to content
Submitted about 3 years ago

Responsive CSS Grid Layout

João Gabriel•340
@joaojgabriel
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How can I align the contents of the boxes vertically? Setting their heights? in percentages? explicitly? Making them grids? flexboxes?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, João Gabriel! 👋

    Congratulations on completing this challenge! 🎉

    Regarding your question, I am not sure what you mean by "contents of the boxes". Do you mean the card? Or the content inside the card?

    But, I notice that the card is not centered vertically. To align the card vertically center, then you can try making the body element as a flex container. After that, set min-height: 100vh to the body element to make the card vertically centered.

    Anyway, I have some feedback on this solution.

    • Always wrap text content with a meaningful element like a paragraph element whenever possible.
    • I don't think that those reason are links. They don't have an active state as far as I could remember. What makes you think that those are links?
    • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉

    Hope this helps. 🙂

    Marked as helpful
  • faizan•2,420
    @afaiz-space

    Hey @joaojgabriel, check the main section and add min-height: 100vh;. and add padding in the why section.

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