Geek asks and answers

Font Size on Mobile

I am using HTML5 BoilerPlate.

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

I tried this, but this did not 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 that the usual size under @mediawould work, but the font is small on my Mac and mobile device.

I would be grateful for any help, thanks!

+5
source share
2 answers

This is because you use min-width

You are a Mac (probably a large screen) and mobile min-width 480and 768and 1140.

To make this different for mobile and desktop computers, you have to 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*/
    }
}
+3
source

, .

@media only screen and (max-device-width: 480px) {
 .search-result {
    font-size: 1em;
 }
}

-, . - , , .

+3

More articles:


All Articles