My Media tags don't work on my website when using my phone
I have just uploaded my website and have been having some problems with @media css tags. On my website on my desktop the scaling works and when i go into inspect and make the resize the page to make it smaller it resizes. The problem is when i go on the website on my phone. It is like the media tags are ignored and it just displays the desktop version of the website.
Here is an example of my code: I have my meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is my @media tags. They are below my normal css styles as i know it can be a problem if they are not .
@media screen and (min-width: 100px) and (max-width: 400px) {...
Here are some pictures of what my website should do when the media tags work.
I have tried other tags but they dont seem to work.
@media screen and (max-width: 400px){
Your media query works only when screens are between 100 and 400px. But most of devices are more 400px.(even Iphone XR is at 414px).
Please use this website (https://screensizemap.com/) to check the device dimensions and their popularity and change the media-query accordingly.
But best bet to support all mobiles is use @media (max-width: 515px). Please refer the below image too.
