CODEWITHSUNDEEP
htmlcssfont-size
Antonino Lattene
Antonino Lattene

Reputation: 99

h1 - h6 responsive font-size

How can I change my h1-h6 font-size for every single @query sizes? I have a simple code like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="katartica.com/wp-content/themes/katartika/css/bootstrap.min.css">
<style type="text/css"> 
body {
    font-size: 100%;
}
@media (max-width:768px){
    body, h1, h2 {
        font-size: 1.2em;
    }
}
@media (min-width:768px){
    body, h1, h2 {
        font-size: 3em;
    }
}
</style>
</head>

<body>
    <h1>questoèuntestomoltolungo</h1>
    <h2>questoèuntestomoltolungo</h2>
    questo è il body
</body>
</html>

When I try to do it h1 and h2 change its sizes for every querys, but they have the same size.

Upvotes: 1

Views: 6031

Answers (3)

Prof. Moriarty
Prof. Moriarty

Reputation: 951

There are two issues to answer your question:

  1. media queries should not overlap exactly so something like this would be better:

enter image description here

  1. the reason your size of h1 and h2 are the same is because you are setting them to be the same size when you do this:

    body, h1, h2 {font-size: 3em;}

You need to do them separately like so:

body { font-size: 1em; }
h1 { font-size: 2rem; }
h2 { font-size: 3em; }`

and you would have to do that for each media query.

Putting it all together you could do this:

screenshot of media queries code

Upvotes: 0

dippas
dippas

Reputation: 60553

your media queries are in conflict.. you can't have a max-width and min-width with same size, therefore it will only choose one of them.

Upvotes: 0

GabrielSNM
GabrielSNM

Reputation: 371

The "H" tags are handled with em therefore by using the same "em" these are equalized.

The W3C recommends using these styles as the default:

    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.17em; }
    h4 { font-size: 1.12em; }
    h5 { font-size: .83em; }
    h6 { font-size: .75em; }

If you want to enlarge them all you should do with each one.

Here you have a complete User Agent stylesheet defaults Here

Upvotes: 2

Related Questions