Mads Kristensen Mads Kristensen - 3 months ago 8
Sass (Sass) Question

font size inherit control on mobile devices

I am administrating a new site, where I have a problem with fontsizes. On the desktop version it is looking fine, but on mobile devices the text is way to big.

.blog {

h2 {
a {
font-size:inherit;
font-weight:inherit;
color:inherit;
}
}


How can I control the font on mobile devices? Can I somehow add something like:

@media screen and (max-width: 768px){

.h1, h1 {
font-size: 1.5em;
}
.h2, h2 {
font-size: 26px;
}


or is that the wrong way to do it?

With this solution the code would look like?:

.blog {

h2 {
a {
font-size:inherit;
font-weight:inherit;
color:inherit;
}


@media screen and (max-width: 768px){

.h1, h1 {
font-size: 16px;
}
.h2, h2 {
font-size: 12px;
}
}

Answer

It is a correct way to use it.

However here are some tips :

Prefear using px over em

because the interpretation of em and ex depends on the OS. px will show the same size no matter what OS you are using.

You can use relative values : %

% will make the font size proportional to his parent font size. This is very good for responsive design so you are going to change only one font size, the parent.

You can use this link for more information on what unit to use and why.

EDIT :

Your code needed some corrections : your CSS missed some }so I fixed it and was able to make your code work.

.blog {

    h2 {
        a {
            font-size:inherit;
            font-weight:inherit;
            color:inherit;
            }
        }


    @media screen and (max-width: 768px){

    .h1, h1 {
        font-size: 16px;
        }
    .h2, h2 {
        font-size: 12px;
        }
    }
}

JSFiddle here