In my UL, there is a span class called user-name. Depending on the screen resolution, I want to either remove or apply a different class.
<link href="media-queries.css" rel="stylesheet">
<span class="user-name">Shane</span>
When I try to redefine the class for different resolutions, it doesn't seem to take effect.
@media only screen and (max-device-width:480px) {
.user-name {
min-width:10px;
display:inline-block;
margin-right:20px;
color:red;
}
}
/* Default styles for iPad screens */
@media only screen and (device-width:768px) {
.user-name {
min-width:10px;
display:inline-block;
margin-right:20px;
color:green;
}
}
It always applies the originally defined class.
.user-name {
min-width:10px;
display:inline-block;
margin-right:20px;
color:red;
}