Responsive CSS Grid Layout

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  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

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

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

  0

  ---

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  @afaiz-space, I had tried that and it didn't work. After taking a step back and trying again with a relaxed state I easily found the answer tweaking in DevTools. Saved the file to understand what I've done and tell you when I get the answer. haha

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @joaojgabriel So, why don't you update the site with the latest changes? I am curious about what you have come up with. 🙂

  0

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  @vanzasetia, in the end it was as simple as using Flexbox and padding in all the child elements of the grid. The code is updated, including the changes you mentioned. Although I'm sure there are a little tweaks that I'll have in mind for next challenges and projects, I'm ready to move on.

  1