Search code examples
htmlcssfont-size

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.

Solution

  • 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.