Comment modifier la taille des fonts uniquement sur mobile?

Bonjour
Je cherche comment modifier la taille de mes textes pour la version mobile, indépendamment de la version desktop. Ou bien rendre l’ensemble responsive ?
(Mon problème actuel est que j’utilise dans mon design de grands caractères pour mes titres, et me retrouve donc avec trop de mots coupés en affichage mobile)

J’ai vu des indications avec Viewport-width ou bien cette solution Increasing Text Size | Email Design Reference
mais je n’ai pas le compétences en code pour les appliquer correctement.

Merci d’avance !

Bonjour @alcha , merci pour votre message !

Je pense que cet article vous sera utile : https://help.brevo.com/hc/fr/articles/360017383919-Éditeur-Drag-Drop-Partie-6-Modifier-l-affichage-de-vos-emails-sur-mobile

En résumé, vous pouvez cliquez sur l’icône mobile, et choisir une configuration sur mobile, notamment concernant la taille des textes. Si j’ai bien lu ce n’est pas détaillé spécifiquement dans l’article, car il donne d’autres exemples, mais c’est tout à fait possible.

Est-ce que cela répond à votre question ?

Bonjour,
merci pour votre réponse !
Si je ne me trompe pas, quand je modifie la taille des textes en affichage mobile, cela change aussi leur taille en affichage desktop…

Ah mince, je pensais que cela fonctionnerait.
En effet, j’ai regardé de mon côté, je n’ai pas l’impression que cela soit possible d’avoir deux tailles de police différentes en fonction de l’appareil (mobile ou desktop).
Peut être que @RDuclos en saura plus ?

Bonjour @alcha
Malheureusement, notre éditeur ne permet pas pour le moment de simplement changer la taille d’un texte entre la version desktop et mobile.
Pour le moment, il est possible de le faire via l’éditeur code comme vous l’avez mentionné ou en contactant le support, qui pourra se charger de le faire pour vous.

A bientôt,
Raphaël

Ok merci quand même !

@alcha il y a une solution, qui suppose que vous écriviez un peu de HTML (soyez rassurée, je vais vous guider :sweat_smile: )

Voici ce qu’il faut faire :

  • ajouter un bloc de texte HTML

  • dans ce bloc de texte, ajouter des éléments de ce type là

@media only screen and (min-width: 600px) {
  #texte {
    font-size: 30px;
  }
}
}

@media only screen and (max-width: 600px) {
  #texte {
    font-size: 20px;
  }

}
</style>

<label id="texte">Votre texte ici</label>

Ce que cela veut dire :

  • min-width: 600px: cela veut dire que cela s’appliquera à tous les écrans au-dessus de 600px
    et sur la ligne en-dessous, font-size: 30px cela veut dire que la police sera de 30 pixels

  • max-width: 600px: cela veut dire que cela s’appliquera à tous les écrans de taille maximale 600px
    et sur la ligne en-dessous, font-size: 20px cela veut dire que la police sera de 20 pixels

De votre côté, vous pouvez copier coller ce bout de code HTML, et à la place de « Votre texte ici », mettre votre propre texte.

Est-ce que cela répond à votre question ?

Merci beaucoup pour votre aide !!
Bonne soirée