L'élément h3 s'éloigne dans l'appareil mobile

Question

J'ai un problème avec un élément h3 sur ma page Web. Il semble correct sur le bureau, mais sur les appareils mobiles se dégage, comme vous pouvez le voir dans les captures d'écran suivantes.

l'élément h3 se trouve dans une div qui a la css suivante:

.experiental-header { 
    position: absolute; 
    text-align: center; 
    width: 100%; 
} 

et l'élément h3 a la css suivante:

.experiental-header h3 { 
    margin: 0 auto; 
    width: 635px; 
    padding: 50px; 
    background: rgba(255, 255, 255, .5);; 
    text-align: center; 
    } 

et dans le dispositif mobile:

J'ai essayé de plusieurs façons de résoudre ce problème, mais aucun d'entre eux n'a bien fonctionné, je n'ai pas trop d'expérience avec les requêtes média réactives. Pouvez-vous s'il vous plaît m'aider à ce sujet? Je vous remercie!

J'ai effectué ma question: Maintenant, il affiche ok, mais le texte « Experiental » ne change pas la taille de la police en mode réactif, comme vous pouvez le voir ci-joint:

J'ai essayé avec:

font-size: 3em; 

mais il semble que ce ne soit pas suffisant. Pouvez-vous s'il vous plaît conseiller?

Answer 1

En Experimental-header h3 appliquent la largeur en pourcentage. Donc, cela fonctionnera bien en réactif.

.experiental-header { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.experiental-header h3 { 
 
    margin: 0 auto; 
 
    width: 30%; 
 
    padding: 50px; 
 
    background:green; 
 
    text-align: center; 
 
    font-size: 2.9vw; 
 

 
    }

<div class="experiental-header"> 
 
    <h3>Heading-3</h3> 
 
</div>