CSS Flexbox and correct HTML semantic

Community feedback

• 

  Martin Liesche•570

  @marliedevPosted 21 days ago

  Hi! Overall a clean and well done solution, but it is not very mobile friendly, because you set the max-width to a relative value (60%). Use fixed values for max/min size and Set width to 100%. Because in mobile devices IT normally should fill Up the whole widht. Also try to work in a mobile first approach

  I would Change the following:

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(30, 100%, 95%);
  }
  
  .content-wrapper {
    max-width: 900px
    width:100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-inline:auto;
  }
  
  

  Marked as helpful

  0

  ---

  

  jorgedoiany•20

  @jorgedoianyPosted 21 days ago

  @marliedev Hi! Thanks for the feedback. I appreciate the kind words about the overall solution. I'll fix the mobile-friendly issue by changing the max-width values and working with a mobile-first approach. Your tips are super helpful!

  0