After deciding to create both desktop and mobile versions of my site, I attempted to utilize media queries in CSS. Unfortunately, after coding them, I discovered that they were not functioning as expected. Seeking a solution, I turned to Youtube where I came across an example, only to find that even after implementing it, the media query still did not work. Next, I sought help on Stack Overflow and encountered a similar issue which was resolved by adding a meta tag in the head section. Despite following this advice, the problem persisted and neither Chrome nor Mozilla displayed the correct styling.
body{
color:red;
}
@media screen and (max-width: 600){
body{
color: blue;
}
}<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>