HTML, CSS.

Community feedback

• 

  Asia Ashraf•780

  @asia272Posted 12 days ago

  This will ensure proper centering and alignment.

  body {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box; }

  • Remove the specified width: 384px; from your .conteudo section because it restricts flexibility and makes your layout less responsive.

  • Instead, use max-width: 384px; to allow it to adjust dynamically.

  • Also, remove the height from .conteudo and use padding instead for better spacing.

  • Remove the unnecessary margin: 8% auto; and use a better centering approach.

  • Implement media queries to improve responsiveness on different screen sizes. For example:

  @media (max-width: 400px) {

  .conteudo {

  width: 100%;  
  

  }

  }

  Benefits of These Changes:

  • Better Responsiveness: The section will adapt to different screen sizes. More Flexibility: Using max-width instead of width allows dynamic adjustments.

  • Proper Centering: Using flexbox ensures proper vertical and horizontal alignment.

  • Cleaner Layout: Removing extra margins prevents layout issues.

  What is the Benefit of box-sizing: border-box;

  • The box-sizing: border-box; property ensures that:

  • Padding and border are included within the total width and height of an element.

  • Prevents unexpected size changes when adding padding or borders.

  Your solution is well-structured and effective! Keep coding, and happy coding!

  Marked as helpful

  1
• 

  ingenierobustamante•130

  @ingenierobustamantePosted 17 days ago

  ya me siento seguro en el manejo de html y he avanzado bastante en css

  2