[RÉGLÉ] Comment rendre responsive un symbole?

[Isabelle62]

Bonjour,

N'étant pas spécialiste du web, j'ai intitulé la question "Comment rendre responsive un symbole?" mais ce n'est pas peut être pas correct. Désolée pour les puristes.

Voici notre problème. Dans notre site web, nous utilisons une typographie appelée blockquote dont voici le css :
blockquote {
font-style: italic;
margin: 40px 0;
color: #999
}

blockquote {
display: block;
padding: 0 0 0 80px;
position: relative;
}

blockquote:before {
color: #68b5ff;
content: "\f10d";
font-family: FontAwesome;
font-size: 56px;
line-height: 0;
position: absolute;
left: 0;
top: 15px;
}
Ce code provient d'un fichier CSS livré avec le template de chez Gavick que nous utilisons pour notre site web.

Le problème que nous rencontrons est que l'affichage du symble " n'est pas responsive. Sur un téléphone mobile, il devient très gros et ce n'est pas esthétique.

Est-ce que quelqu'un aurait une solution pour que ce symbole s'adapte à la taille de l'écran?

Merci par avance pour votre aide
Isa

[jisse03]

Re : Comment rendre responsive un symbole?

Bonjour,

Il faut utiliser les media queries pour adapter les tailles de polices en fonction du media.
Au lieu des pixels, il vaudrait également mieux définir les tailles en em, qui sont davantage adaptatifs.

[Isabelle62]

Re : Comment rendre responsive un symbole?

Bonjour Jisse,

merci pour votre réponse.
Nous venons de mettre l'unité de la police en em. Pas de changement évidents.
pourriez-vous nous indiquer comment faire pour utiliser les media queries dans notre cas précis?

Merci par avance pour votre aide
Isa

[jisse03]

Re : Comment rendre responsive un symbole?

https://developer.mozilla.org/en-US/.../Media_queries donne les indications générales.

Pour chaque type de media, un exemple

@media (max-width: 600px) {
  .blockquote:before {
    font-size 3em
  }
}

en jouant sur chacun des modes responsive, donner la bonne taille pour le média concerné...

[Isabelle62]

Re : Comment rendre responsive un symbole?

Merci.
Nous allons essayer de bien comprendre car les premiers tests ne sont pas concluants.

Bien à vous
Isa