CODEWITHSUNDEEP
htmlcssmedia-queriesfont-size
Oliver Chalk
Oliver Chalk

Reputation: 177

font-size in @media queries not applying

I have managed to get the iFrame and body content width to change with the @media rule however I cannot get the font-size to adjust successfully. In my HTML my @media rules come after my style css in a seperate file. I cannot see what is preventing the font-size from changing the font-size.

JSFiddle (Broken):

http://jsfiddle.net/OliverNChalk/1a04Lx4g/

Style CSS:

#bodycontent {
z-index: 2;
background-color: rgba(255,255,255,0.2);
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
    font-size: 2em;
}
p {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    color: lightgrey;
}

These are then the media rules:

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

    #bodycontent {
        font-size: 1em;
        width: 95%;
    }

    p {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    color: lightgrey;
    font-size: 1em;
}

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 400px;
    }
}

@media screen and (max-width: 840px) {
    #bodycontent {
        font-size: 1.4em;
        width: 95%;
    }

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 85%;
    height: 400px;
    }
}

@media screen and (max-width: 1200px) {
    #bodycontent {
        font-size: 1.7em;
        width: 95%;
    }

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 90%;
    height: 400px;
    }
    }

Any answers are much appreciated :)

Upvotes: 2

Views: 2823

Answers (2)

Oliver Chalk
Oliver Chalk

Reputation: 177

max-width is constantly being overridden as the screen size increases. However using mind-width is not being overridden as the CSS is lower down in the sheet. This uses CSS's cascading nature to override the irrelevant code.

e.g. 

@media screen and (min-width: 840px)

Overrides the previous 720px rule. As the browser has met the requirement for the larger screen it runs the code overriding the previous statement.

@media screen and (min-width: 720px) {
    #bodycontent {
        font-size: 1.5em;
        width: 95%;
    }

    iframe {
    width: 90%;
    height: 600px;
    }
}

@media screen and (min-width: 840px) {
    #bodycontent {
        font-size: 1.7em;
        width: 95%;
    }

    iframe {
    width: 90%;
    height: 600px;
    }
}

Upvotes: 3

Emanuel Elliott
Emanuel Elliott

Reputation: 283

Perhaps you are signaling for more than one media query at once. For example, you have one media query that asks if the max width is 1200px. You then have another query asking if the max width is 840px, and so on. What I am suggesting is that maybe, when you trigger the 1200px, you also trigger the 840px. Now, I am no CSS expert but I am just offering an outsider's standpoint. That's my 2 cents.

Good luck with figuring this out in the case that my answer is incorrect.

Best Regards, Emanuel

Upvotes: 1

Related Questions