I am experiencing an issue where my website is not loading on mobile devices, but it functions properly when I adjust the size of my Chrome window on my laptop.
@media screen {
body{
background-image: url(background.jpg);
background-color: #FFFFFF;
color:darkgray;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
@media screen and (max-width: 480px) {
body{
background-color: pink;
color:black;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
<html lang="en">
<head>
<link rel="stylesheet" href="pac.css" media="screen" >
<link media= "screen and (max-width: 480px)" href="pac.css" rel="stylesheet">
</head>
</html>
Could someone please help me identify why my website is not functioning correctly on mobile devices?