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.
Website on Phone
If you want to go to my website and view it on your phone it is arthropodtec .co.uk
I have tried other tags but they dont seem to work.
@media screen and (max-width: 400px){
>Solution :
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.
