CSS media query min width

Last blog we talked about how to use flex box to display the three divs the same size horizontally.

However, when we shrink the page, then divs display in a way that is not easy for the user to view the content:

without @media min-width

We can use @media min width to limit that only when the screen size is larger than the size we set (here is 800px), the .Container div will display flex.

In this way, when we shrink the screen to less than 800px, the three divs will display in a column which is easier for the user to read.

with @media min-width