Why do you set a min-width of 320px in this project?

By specifying a min-width, the code inside the media query won't apply to resolutions below 320px wide. Not sure how necessary it is, but that's how the code should function.

In terms of cascading style sheets, my experience has been to set a min-width in cases where I have to write a similar rule that cannot simply be overridden by a prior rule. For instance, I may want to replace a horizontal menu with a vertical menu as my browser width reduces. I will set the horizontal menu to only display above the width of 320px. Under 320px, only my vertical menu will exist.

@media (max-width: 319px) {
       #hmenu ul {
              display: none;
       }
       #vmenu ul {
              display: block;
       }
}
@media (min-width: 320px) and (max-width: 568px) {
       #hmenu ul {
              display: block;
       }
       #vmenu ul {
              display: none;
       }
}```

Andrew Chalkley , It has been 4 months since this question was asked and none of the answers is definitive. Since you wrote the code in question, can you bring light to the situation? Thanks.

I picked the horizontal resolution of the iPhone.

Andrew Chalkley , Thanks for the amazing quick response, but the question isn't why you chose the the value you did, but why have a min-width criterion at all in this case? (as a corollary, why should something different occur at widths below 320px?)

Actually, the min-width is probably not needed. I've just added this to the head of the HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

And tested it on an iPhone 6 (don't have one with 320px).

Good spot!