What is the difference between max-width and min-width?

Question

When/how do we use this property?

Answer 1

here is the example code
https://code.sololearn.com/W0M9k4RmmjD3/?ref=app

Answer 2

max-width is maximum width
min-width is minimum width

i'll be back, please wait, i want to give an example code

Answer 3

@media only screen and (max-width: 599px)
{
body
{
background: green;
}
}

@media only screen and (min-width: 600px)
{
body
{
background: blue;
}
}

copy code above to css section

when your screen width below or same to 599px, the bgcolor will be green
when your screen width above or same to 600px, the bgcolor will be blue

Answer 4

minimum means that the value cannot be less than that... It has to be either that value or more than that.. Maximum means that the value cannot exceed that value.. It has to be either less than or equal to that value..
Eg:-
if min-width : 20px...it mean that width cannot be less than 20px
max-width: 100px.. It mean that width cannot be more than 100px
Hope you got it. 👍

Answer 5

@JFS Animion Thank you for your response but I'm still in doubt about the min-width. If you don't mind, can you explain it in other way?

Answer 6

Thank you very much guys, now it all makes sense. This is why this is usually used in a responsive layout/design in many websites.

Answer 7

Width is resize according to the parent element size