Responsive page with CSS Flexbox and Media query

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeace

  Posted almost 3 years ago

  Hello @ABQ4539 you did a great job

  to answer your question

  • min-width = minimum width this simply tells the browser that a particular element should not be less than a certain width for example

  main{
  min-width: 200px
  }
  

  This means the main container is allowed to grow beyond 200px but it is not allowed to shrink below 200px

  • so if your screen width becomes less than 200px, your main container will either overflow or become hidden if your overflow is set to hidden

  overflow: hidden;
  

  • max-width is the opposite of min-width

  main{
  max-width: 375px
  }
  

  This means that your container will not grow more than 375px but it can shrink below 375px

  • when using max-width, make sure you also set your width to 100% so

  main{
  max-width:375px;
  width:100%;
  }
  

  This will ensure that when the screen width shrinks your content will still look good

  • I also noticed that in some cases you set your max-width to 100% like this

     .container {
          max-width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-bottom: 40px;
      }
  

  instead of doing this just set the width to 100% min-width can be 100% but max-width should not be 100%

  • Lastly do not use px to set font-size instead use relative units like rem this way when the user zooms in or out the structure of the site will not be distorted

  • in fact you should should relative units like rem and em more often than px

  I HOPE THIS HELPS

  01

  Marked as helpful