28172 sujets

CSS et mise en forme, CSS3

Taille Hx à surcharger

Bonjour
J'ai un problème pour mettre des tailles de H1 à H4
Je n'ai pas mis des valeurs très grandes pour les titres
H1 1,3 em
H2 1,2 em
H3 1,1 em
H4 1,05 em

maj fil avec résolution avec !important

Cela passe bien sur un écran d'ordi mais pas du tout sur smartphone où c'est encore trop gros,
J'ai compris que cela venait d'un fichier compilé (dont ne sais, peut-être un composant du cms?). En tout les cas, dans l'urgence, j'ai fais une surcharge (même si ce n'est pas dans les règles de l'art)

Page (sans http pour eviter indexation):
preprod2.altius.fr/fr/realiser-en-acces-difficiles.html

Ma surcharge à la fin de mon fichier :

@media (max-width: 991.98px) {
    body,
    .body {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.7em;
    }
    h1,
    .h1 {
        font-size: 1.3em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h2,
    .h2 {
        font-size: 1.2em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h3,
    .h3 {
        font-size: 1.1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h4,
    .h4 {
        font-size: 1.05em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h5,
    .h5 {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h6,
    .h6 {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    
}
@media (max-width: 767.98px) {
    body,
    .body {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.7em;
    }
    h1,
    .h1 {
        font-size: 1.3em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h2,
    .h2 {
        font-size: 1.2em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h3,
    .h3 {
        font-size: 1.1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h4,
    .h4 {
        font-size: 1.05em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h5,
    .h5 {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h6,
    .h6 {
        font-size: 1em!important;
        letter-spacing: 0em;
        line-height: 1.2em;
    }

}


Code aberrant:
@media (max-width: 991.98px) {
    body,
    .body {
        font-size: 1em;
        letter-spacing: 0em;
        line-height: 1.7em;
    }
    h1,
    .h1 {
        font-size: 3.2em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h2,
    .h2 {
        font-size: 2em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h3,
    .h3 {
        font-size: 1.8em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h4,
    .h4 {
        font-size: 1.6em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h5,
    .h5 {
        font-size: 1.4em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h6,
    .h6 {
        font-size: 1.2em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    
}
@media (max-width: 767.98px) {
    body,
    .body {
        font-size: 1em;
        letter-spacing: 0em;
        line-height: 1.7em;
    }
    h1,
    .h1 {
        font-size: 3em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h2,
    .h2 {
        font-size: 1.8em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h3,
    .h3 {
        font-size: 1.7em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h4,
    .h4 {
        font-size: 1.5em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h5,
    .h5 {
        font-size: 1.4em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }
    h6,
    .h6 {
        font-size: 1.2em;
        letter-spacing: 0em;
        line-height: 1.2em;
    }

}

Modifié par HDcms (27 Sep 2023 - 18:15)
salut
comme base je fait avec çà si çà peut t'aider avec un 110% pour les grands écrans


html, body {
font-size: 100%;
font-size: 1rem;
background-color: #eee;
font-weight: 300;
font-family: system-ui, sans-serif;
line-height: 1.8;
color: #111;
margin: 0;
padding: 0;
}

h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.4rem;
}
.txt {
font-size: 1.2rem;
}

@media only screen and (orientation: landscape) and (min-width: 900px) {
html, body {
font-size: 110%;
}
}
Prévenir un modérateur
Répondre au sujet
Aller à