Despite creating a basic example using media queries, I'm puzzled that the effect is not being applied at the exact min-width, but rather at (offset + min-width).
The HTML document is currently empty.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Test media query</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
</body>
</html>
CSS file:
body{
background-color: grey;
}
@media (min-width: 500px){
body{
background-color: red;
}
}
I expected the background color of the body to change once the window size on my PC reached 500px. However, it actually changed at 875px in Google Chrome. How can I ensure it changes at 500px as intended in my code?