Empêcher banner de disparaitre sur ecran petite largeur et adapter police largeur div

[morgan89]

Bonjour,

Sur mon site www.osteopathe-yvelines.fr, j'ai plusieurs problèmes de mise en page sur petits écran, smartphone, ...

1. D'abord au-dessus du menu, j'ai placé des éléments en position banner. Je les ai déplacé avec l'attribut absolute. J'aimerai qu'il reste visible quand la largeur d'écran diminue mais je n'y arrive pas. La méthode utilisée n'est sans doute pas la plus recommandée en plus.
2. Ensuite sur la droite, j'aimerai bien que la taille de la police s'ajuste en fonction de la largeur de l'élément. Le téléphone est coupé en 2 et va a la ligne, c'est pas top comme ca.
3. Enfin, sur la droite, il y a un bouton rouge prendre rdv, et celui-ci-s'adapte a la largeur mais il faudrait que le texte passe automatiquement a la ligne si la largeur est trop petite car sinon le texte disparait.

Merci de votre aide
Cordialement

[morgan89]

Re : Empêcher banner de disparaitre sur ecran petite largeur et adapter police largeu

Bonjour,
Personne ne peut m'aider svp car je n'ai toujours pas trouvé de solution ?
Merci

[webcrea]

Re : Empêcher banner de disparaitre sur ecran petite largeur et adapter police largeu

dans la css générée par le plugin tu as ligne 756

@media (max-width: 1220px){#banner{display:none}}

ce qui a pour effet de cacher le header au-dessous de 1220px de largeur du média

toujours dans la même css, ligne 519, tu as la déclaration du bouton
.button-primary2 {
height: 38px;
color: #FFF;
border-radius: 10px;
line-height: 38px;
background-color: #FF4040;
cursor: pointer;
margin-top: 8px;
padding: 5px 12px 5px 71px;
display: inline-block;
}
si tu supprimes line-height:38px; le texte s'affichera au dessous.
tu peux aussi jouer avec taille des caractères et @media pour ajuster la taille en fonction de la largeur d'écran

  entre les chiffres force un espace insécable et empêche le retour à la ligne

[morgan89]

Re : Empêcher banner de disparaitre sur ecran petite largeur et adapter police largeu

Merci beaucoup.
En supprimant line-height, ca ne centre plus a la vertical. Pour ceux que ca interesse il suffit d'ajouter vertical-align:middle et display:table-cell.
Je passe en résolu.
Merci