When using media queries
you need to add this to your head
tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This allows the website to detect that it is being used on a device.
You can also do this,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
This part, user-scalable=0;
prevents the user from zooming with their fingers and is useful if you have position: fixed
elements.