0

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

}
R. Arnone
  • 423
  • 4
  • 14
Niccolò Guidi
  • 195
  • 1
  • 13
  • Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – n_plum Feb 03 '17 at 19:29
  • @n_palum I wrote that the code isn't working, not how to do it! – Niccolò Guidi Feb 03 '17 at 19:40
  • @NiccolòGuidi: is this just an example? It doesn't make sense to increment font size by 1px... – deblocker Feb 08 '17 at 08:19

1 Answers1

1

CSS rules order is that master (default) rules should come first. They define default styles. And second "section" contains media queries. Thus you just need to move last two classes to the begin of the stylesheet. In your case they override all rules defined by media queries.

Here is a solution:

#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

}
@media only screen and (max-width:320px) {
    #easy {
        font-size: 24px;
    }
    h2{
      font-size: 15px;
    }
}

@media only screen and (max-width:379px) {
    #easy {
        font-size: 25px;
    }
    h2{
      font-size: 16px;
    }
}


@media only screen and (max-width:419px) {
    #easy {
        font-size: 26px;
    }
    h2{
      font-size: 17px;
    }
}

@media only screen and (min-width:420px) {
    #easy {
        font-size: 27px;
    }
    h2{
      font-size: 18px;
    }
}
Banzay
  • 8,870
  • 2
  • 22
  • 43