CSS Flexbox

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 3 months ago

  Hi, @cEbuka,

  I’ve reviewed your solution and would love to share some suggestions: 1. Use min-height: 100vh on the body instead of .wrapper

  Applying min-height: 100vh directly to the body ensures the entire viewport height is utilized without adding unnecessary structural elements. This approach keeps the layout cleaner and more consistent across devices.

  2. Simplify the structure by removing .wrapper

  The .wrapper div isn’t necessary here. The main and footer tags are semantic and can stand alone. You can transfer the styles from .wrapper to the body for simplicity. Similarly, the .text class isn’t required—apply its styles directly to the h1 and p tags. This reduces nesting and makes the markup cleaner.

  3. Avoid using Flexbox or Grid on the card (main)

  Flexbox or Grid isn’t needed on the main section itself. If the goal is to center the card, apply Flexbox or Grid to the body (after removing .wrapper). This allows for easier vertical and horizontal centering. Since most of the main’s children are block-level elements (like h1 and p), they naturally stack vertically. You only need to add appropriate margin for spacing.

  4. Properly use Grid for centering If you want to use Grid for centering, apply display: grid and place-items: center to the body. This efficiently centers all content. However, remember that place-items: center centers all children, not just one. I recommend exploring Grid more through practice to find what best suits your layout.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Chukwuebuka•30

  @cEbukaPosted 3 months ago

  @huyphan2210,

  Thanks for the review, I made some changes and learnt something new from you.

  • For the .text, I used it as a container to apply styles to the p and h1.
  • I am working on CSS Grid layout, Thanks a lot.

  1