Mobile-first solution using CSS Grid and Flexbox

Community feedback

• 

  Manish Singh•230

  @manishsinghrajPosted 4 months ago

  Hi, Great Start!

  Though I don't see any valid links for site or code. But answer for your question is use min height as 100vh (view height)

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  

  This is the usual pattern one can use to center.

  0
• 

  João Rodrigues•70

  @joaotfrodriguesPosted 4 months ago

  Hi @Zeref1028,

  Great job on your project! I noticed you had some challenges, especially with media queries and centering your container. Here’s a detailed response to your question:

  The issue you encountered is because the body element doesn’t have a defined height. It currently has height: auto;, which means its height is determined by its content.

  Solution: You can improve this by adding min-height: 100vh; to the container. This ensures that the body takes at least the full height of the viewport, which will allow flexbox centering to work as intended.

  Always use min-height instead of setting a fixed height for responsive purposes.

  Additionally, here are a few points for further improvement:

  • Figma File: This project is a FREE+, so you get a Figma file for free. Use it to ensure your measurements are accurate.
  • Semantic HTML: Start using semantic HTML elements instead of just divs. Try to use: header, footer, main, section, article, etc. This improves accessibility and makes your code more readable.
  • Reset.css: Start using a reset.css file. This helps to normalize styles across different browsers, ensuring a more consistent look and reducing the need for extensive CSS resets within your main stylesheet.

  By addressing these points, you’ll enhance both the functionality and maintainability of your project.

  Best regards, João Rodrigues

  0
• 

  Andrey•680

  @AndreyDimitrov3Posted 4 months ago

  Well done on finishing your first project. I have just one suggestion for you. You could try setting the container height to:

  height: 100vh; (100vh = 100 viewport height) which will automatically display the content in the center of the page.

  Otherwise everything seems alright. Keep on going!

  0