Responsive page with CSS Flexbox and Media query

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