illisible sur les portables

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

  • [RÉGLÉ] illisible sur les portables

    Bonjour à tous,
    Petit problème de "responsive design".
    Mon site est illisible sur les portables (affichage d'une syllabe par ligne). Les marges ne semblent pas "responsive", si bien 'est correct sur PC et tablettes mais sur les teléphones portable la partie restante au centre est minuscule.

    J'utilise le protostar de base avec un user css réduit à très peu qui met le texte en Georgia 13em, car j'ai des textes longs qui doivent être lisibles.

    site http://www.philosciences.com/Pss/
    Dernière édition par pjuignet à 27/10/2016, 10h25

  • #2
    Re : illisible sur les portables

    Bonsoir,
    Ajouter en fin de votre user.css

    @media (max-width: 480px) {
    [class^="leading-"] {margin:0}
    }
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Re : illisible sur les portables

      Bonsoir,
      Je vois un problème de margin:0 qui est annulé ...
      renomme ton user.css en userhold.css ... juste pour voir si c'est bien un soucis avec tes règles Css (vu que tu n'as touché qu'a ça)
      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer
      Cette année, le JoomlaDay FR a lieu à Bruxelles, les 20 et 21 mai 2022, plus d'infos et inscriptions : www.joomladay.fr

      Commentaire


      • #4
        Re : illisible sur les portables

        Envoyé par manu93fr Voir le message
        Bonsoir,
        Je vois un problème de margin:0 qui est annulé ...
        renomme ton user.css en userhold.css ... juste pour voir si c'est bien un soucis avec tes règles Css (vu que tu n'as touché qu'a ça)
        Exact bien vu
        ça vient de mon fichier user.css
        Code HTML:
        body {
        	margin: 0;
        	font-family: Lato;
            font-size: 1em;
        	line-height: 1.5em;
        	color: #333;
        	background-color: #fff;
        }
        
        h1 {
            font-size: 2.2em;
        }
        
        h2 {
            font-size: 1.6em;
        }
        
        h3 {
            font-size: 1.2em;
        }
        
        p {
            font-family: Georgia;
            font-size: 1.2em;
            line-height: 1.6em;
           }
        
        [class^="leading-"] {
            border-bottom: 3px solid red;
            margin: 0 6em;
        }
        
        .item-page > div {
            margin: 0 8em;
        }
        Je pense que ça vient des dernières lignes .item-page

        Commentaire


        • #5
          Re : illisible sur les portables

          Envoyé par lomart Voir le message
          Bonsoir,
          Ajouter en fin de votre user.css

          @media (max-width: 480px) {
          [class^="leading-"] {margin:0}
          }
          je vais essayer ce genre de méthode, car je ne veux pas supprimer mes marges en général.

          >>après essai ça ne marche pas. les marges restent trop grandes sur les portables.
          Dernière édition par pjuignet à 26/10/2016, 21h23

          Commentaire


          • #6
            Re : illisible sur les portables

            après essai ça ne marche pas. les marges restent trop grandes sur les portables.
            Il n'y a pas de raison. Il faut peut-être adapter la largeur à partir de laquelle on supprime les marges (ici 480px)
            Remettez votre user.css avec cette règle, je regarderais ce qui coince.

            Vous pouvez mettre la règle
            [class^="leading-"] {
            border-bottom: 3px solid red;
            margin: 0 6em;
            }
            avec margin: 0 1em;
            afin de permettre les tests sans dénaturer le site

            soit :
            Code:
            body {
            	margin: 0;
            	font-family: Lato;
                font-size: 1em;
            	line-height: 1.5em;
            	color: #333;
            	background-color: #fff;
            }
            
            h1 {
                font-size: 2.2em;
            }
            
            h2 {
                font-size: 1.6em;
            }
            
            h3 {
                font-size: 1.2em;
            }
            
            p {
                font-family: Georgia;
                font-size: 1.2em;
                line-height: 1.6em;
               }
            
            [class^="leading-"] {
                border-bottom: 3px solid red;
                margin: 0 1em;
            }
            
            .item-page > div {
                margin: 0 8em;
            }
            @media (max-width: 480px) {
                [class^="leading-"],
                .item-page > div {
                  margin:0
                }
            }
            J'ai étendu la règle aux .item-page > div
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              Re : illisible sur les portables

              Envoyé par lomart Voir le message
              J'ai étendu la règle aux .item-page > div
              ça marche les marges sont annulées sur les portables avec :

              Code:
              @media (max-width: 480px) {
                  [class^="leading-"],
                  .item-page > div {
                    margin:0
                  }
              }
              Du coup ne pourrait-on pas faire une taille de caractère qui s'applique aux portables avec une règle du même genre ??


              Code:
              @media (max-width: 480px) {
                 p {
                  font-family: Arial;
                  font-size: 0.9em;
                  line-height: 1.1em;
                  }
              }
              ?????

              Commentaire


              • #8
                Re : illisible sur les portables

                ?????
                Tout à fait
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  Re : illisible sur les portables

                  Envoyé par lomart Voir le message
                  Tout à fait
                  j'essaye..

                  C'est bon, ça marche .

                  Mais il faudrait faire pareil pour les tablettes.

                  En fait, je suis entrain de reconstituer le responsive design que j'ai annulé avec ma commande pour avoir un format texte mieux adapté aux grands écrans. Ce n'est pas malin cette manière de faire. Je refais ce que j'ai défait...
                  Dernière édition par pjuignet à 27/10/2016, 09h06

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X