Comment rendre responsive un symbole?

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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
    Dernière édition par Isabelle62 à 01/06/2015, 11h19
    Isabelle G.
    www.guillenphoto.com

  • #2
    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.
    Pas de demande de support par MP.
    S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

    Commentaire


    • #3
      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
      Isabelle G.
      www.guillenphoto.com

      Commentaire


      • #4
        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
        Code:
        @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é...
        Pas de demande de support par MP.
        S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

        Commentaire


        • #5
          Re : Comment rendre responsive un symbole?

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

          Bien à vous
          Isa
          Isabelle G.
          www.guillenphoto.com

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X