Grid layout

Community feedback

• 

  Gio Cura•650

  @GioCuraPosted over 1 year ago

  Hi! 👋 I took a look at your code, and what's causing the problem is the min-height: 80vh that you initially set on your .card element. While this height might be good for the mobile layout, it's forcing your card to extend higher than needed for the desktop version.

  So, in your (min-width: 80em) media query for .card, you can write min-height: initial or min-height: 0 to reset it. That should take out the dead space!

  1
• 

  George Manimbo•180

  @GeorgenicoPosted over 1 year ago

  Hi there, congratulation on finishing this project.

  I tried to examine your code and I think the little weird dead space you're talking about is coming from the minimum height. I suggest that you remove that from the parent container.

  .card { min-height: 80vh }

  Just remove that and I think you are fine now.

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  MIN-HEIGHT 📐:

  • Use min-height: 100vh for main instead of height: 98vh. Setting the height: 98vh may result in the component being cut off on smaller screens.

  ---

  • For example; if we set height: 98vh then the main will have 98vh height no matter what. Even if the content spans more than 98vh.

  ---

  • But if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0