I want my font size to change when the browser resizes as well as on mobile. If I try to do it on PC this code works, but if I open my site on mobile it doesn't resize my text.
I'm asking why this code isn't working, not how write it.
Html (about the stylesheet; the one for mobile is the "handheld.css"):
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)">
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)">
handheld.css:
@media only screen and (max-width:320px) {
#easy {
font-size: 24px;
}
h2{
font-size: 15px;
}
}
@media only screen and (min-width:321px) {
#easy {
font-size: 25px;
}
h2{
font-size: 16px;
}
}
@media only screen and (min-width:380px) {
#easy {
font-size: 26px;
}
h2{
font-size: 17px;
}
}
@media only screen and (min-width:420px) {
#easy {
font-size: 27px;
}
h2{
font-size: 18px;
}
}
#easy{
position: relative;
left: 40%;
font-family: "sweetness", Verdana;
top: -63%;
margin-left: 3px;
fontsize: calc(15px + 3vw);\\this is an alternative to media queries
}
h2{
position: relative;
color:#fff;
text-decoration: none;
font-family: "sweetness", Verdana;
text-shadow:
-0.5px -0.5px 0 #000,
0.5px -0.5px 0 #000,
-0.5px 0.5px 0 #000,
0.5px 0.5px 0 #000;
top: 40px;
fontsize: calc(15px + 2vw); \\this is an alternative to media queries
}