I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made sure that the responsiveness is turned on and the size is set to 100%. Can anyone offer some assistance?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query</title>
<style>
@media screen and(max-width:300px){
body{
color:aqua;
background-color:darksalmon;
}
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni cupiditate, adipisci consequatur aliquam modi quo earum maxime ea impedit vitae obcaecati voluptatum. Adipisci repudiandae, officiis laborum itaque eum totam error.</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam minus asperiores iste ratione aut autem laudantium aliquid, deleniti nostrum, delectus exercitationem, corrupti distinctio fugit commodi odio. Dolorem rem sunt temporibus!</p>
</body>
</html>