Media Query not reading from Widths 479px to 767px?

Question

I have three media queries that range like this:

@media screen and (min-width: 360px) and (max-width: 479px)
@media screen and (min-width: 480px) and (max-width 767px)
@media screen and (min-width: 768px) and (max-width: 1023px)

The issue is that my website doesn't read the styles in the width range of 479px to 767px which is something I do not understand, any assistance with this of suggestions are very much liked, thanks!

Answer 1

You have a typo you forgot the colon at the (max-width 767px) it should read like the following:

@media screen and (min-width: 360px) and (max-width: 479px)
@media screen and (min-width: 480px) and (max-width: 767px)
@media screen and (min-width: 768px) and (max-width: 1023px)

Here is a snippet

 @media screen and (min-width: 360px) and (max-width: 479px){ body{background:green;} } @media screen and (min-width: 480px) and (max-width: 767px){ body{background:yellow;} } @media screen and (min-width: 768px) and (max-width: 1023px){ body{background:red;} }