I have a good grasp on responsive design and CSS techniques.
However, I am encountering an issue where the media query for mobile dimensions is not working as expected.
When monitoring the applied styles in Chrome, only the min-device-width styles are being loaded.
Does anyone have insight into why this might be happening?
Below is the code snippet from my index file. UPDATED
<link href="styles.css" rel="stylesheet" type="text/css">
@media (max-device-width: 480px){
/* Styles */
#profilebody_avatar
{
width: 10em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
@media (min-device-width: 1024px){
#profilebody_avatar
{
width: 20em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}