Being relatively new to responsive websites, I have previously built a few that worked seamlessly. However, I am currently facing some challenges with a site. When I view it on a laptop or desktop and adjust the browser size, the breakpoints work perfectly. But when I try to view it on a mobile device, it just loads the full-size version and fits it to the screen width without taking into account the media-specific stylesheets. I have utilized this method before without any issues, so I am hoping someone can provide me with some guidance. I have searched through forums for similar issues but haven't had any luck with the suggested solutions.
The URL I am working from is www.evolvecollaboration.com/test/index.html and below is the code snippet:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="_css/myer_reset.css">
<link rel="stylesheet" type="text/css" href="_css/structure.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/structure_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/structure_mobile.css" />