font-size on mobile

Question

I am using the HTML5 BoilerPlate.

I want to make the font-size of a certain block small ONLY on mobile devices.

I tried this, but it didn't work:

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1em;
    }
}

I thought making it ordinary size under the @media would work, but the font is small on my Mac and mobile.

I'd appreciate any help, thanks!

Answer 1

That is because you are using min-width

You Mac (probably big screen) & mobile is min-width 480 & 768 & 1140.

To make it for mobile & desktop different, you should do this (keeping your actual code):

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;/* mobile font-size */
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1.4em;/*overrule for big screens*/
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1.4em;/*another overrule for even bigger screens*/
    }
}