Problème de dimensions sur mobile

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

  • [RÉGLÉ] Problème de dimensions sur mobile

    Bonjour

    Je rencontre un sérieux problème de design sur le mobile (firefox et chrome).
    Le template utilisé provient de chez mixwebtemplates, censé être responsive mais le rendu est très limite.
    Je soupçonne du CSS mal réalisé, mais j'aurais besoin de vos avis et aides.

    Le site est https://destyleenaiguille.fr/

    Je vous remercie
    Dionee
    Dernière édition par dionee à 15/11/2021, 11h44

  • #2
    Bonsoir
    ton template est responsive "à la bas" mais est surement mal "personnalisé"
    Tu as la version free ou commerciale ?
    Rien que le nom du site fait sauter tout le responsive en smartphone
    Que veux tu changer exactement ?
    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


    • #3
      Bonjour,
      A part le header, le reste semble convenir
      Il faut créer des mediaqueries pour ajuster la taille de la police aux largeurs de l'écran
      Code:
      @media (max-width: 480px) {.logo{font-size:650%}}
      A adapter et dupliquer pour les autres largeurs
      Une autre solution est de créer un module personnalisé avec cette action UP : https://up.lomart.fr/demo/action-text-fit
      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


      • #4
        Envoyé par manu93fr Voir le message
        Bonsoir
        ton template est responsive "à la bas" mais est surement mal "personnalisé"
        Tu as la version free ou commerciale ?
        Rien que le nom du site fait sauter tout le responsive en smartphone
        Que veux tu changer exactement ?
        Bonjour

        J'ai la version commerciale. Je pense qu'elle doit être mal personnalisée car je doute qu'on puisse vendre un template avec défaut ....
        Tous les éléments seraient changer pratiquement mais j'ai peu d'expérience concernant les sites sur mobile. La première action porterait sur l'espace horizontale. Comme vous pouvez le constater, la page principale n'occupe pas toute la largeur d'ou une perte de place.

        Est-ce que ce serait le header qui en serait responsable ?

        Commentaire


        • #5
          Envoyé par dionee Voir le message
          J'ai la version commerciale.
          Tu veux dire que tu as payé pour ça ?

          On a vu mieux, et moins cher... à commencer par le template natif Protostar qui, avec 2 ou 3 petites modifs dans le fichier user.css, aurait donné un rendu visuel et ergonomique plus efficace

          L'unité de mesure est en pixel alors qu'en rem c'eut été bien plus efficace et responsive...

          Envoyé par dionee Voir le message
          je doute qu'on puisse vendre un template avec défaut
          Doute pas trop.
          De nos jours on vend tout et n'importe quoi, et plus souvent n'importe quoi...

          Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.

          Après, utiliser un système de colonnes avec des div en %, des "inline" et des "float" à tour de bras, sans aucune "mediaqueries" qui permettrait d'adapter la feuille de style aux principales résolutions d'écran, c'est pas très propre.
          L'emploi de flex aurait, là encore, été bien plus inspiré.

          Envoyé par dionee Voir le message
          Est-ce que ce serait le header qui en serait responsable ?
          Le responsable c'est celui qui a fait ce template.
          Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.- "ça dépend ça dépasse"
          Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
          Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

          Commentaire


          • #6
            Envoyé par dolmenhir Voir le message
            Tu veux dire que tu as payé pour ça ?

            On a vu mieux, et moins cher... à commencer par le template natif Protostar qui, avec 2 ou 3 petites modifs dans le fichier user.css, aurait donné un rendu visuel et ergonomique plus efficace

            L'unité de mesure est en pixel alors qu'en rem c'eut été bien plus efficace et responsive...


            Doute pas trop.
            De nos jours on vend tout et n'importe quoi, et plus souvent n'importe quoi...

            Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.

            Après, utiliser un système de colonnes avec des div en %, des "inline" et des "float" à tour de bras, sans aucune "mediaqueries" qui permettrait d'adapter la feuille de style aux principales résolutions d'écran, c'est pas très propre.
            L'emploi de flex aurait, là encore, été bien plus inspiré.


            Le responsable c'est celui qui a fait ce template.
            Bonsoir,
            le template tient la route apparemment, il est même compatible J!4 d'après l'auteur, c'est ce qui en est fait avec qui est surement mal personnalisé
            https://www.mixwebtemplates.com/joom...oomla-template
            Quand tu vois qu'il y a un font-size: réglé à 850% sur le logo ...


            @dionee
            Est ce toi directement qui a fait cette personnalisation ?
            Est ce bien la référence de ton template commercial sur le lien que j'ai posté ?
            Est il à jour ? (dernière version octobre 2021)

            Le template étant commercial, il va être difficile de te répondre sur ses réglages "internes" mais il devrait y en avoir ... sinon, regarde si tu as un fichier custom.css pour y trouver les règles de personnalisation ... et ainsi pouvoir les modifier sans risque
            Au minimum il faudrait déjà mettre l'écriture du texte du "logo" plus petite
            Dernière édition par manu93fr à 13/11/2021, 02h40
            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


            • #7
              Bonjour

              J'ai effectué les modifications en me basant sur d'autres templates ou des avis de forums... ou en me basant sur le rendu donné sur le PC mais sans vraiement testé sur un mobile.

              Le lien du template est le bon, c'est effectivement celui-ci; l'auteur est MixWebTemplate.

              La taille du logo est importante pour le rendu sur PC, je voulais qu'il se démarque sans avoir à en faire une image.
              J'ai regardé le UP et il me semble attractif; je vais faire des tests avec.

              Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.
              Le but était d'obtenir une page scrollable sur un fond fixe au lieu d'avoir une seule page. D'où les 20%. Le rendu est parfait en PC mais sur mobile, c'est ce qui pêche

              Commentaire


              • #8
                Envoyé par dionee Voir le message
                Le but était d'obtenir une page scrollable sur un fond fixe au lieu d'avoir une seule page. D'où les 20%. Le rendu est parfait en PC mais sur mobile, c'est ce qui pêche
                D'où l'impérieuse utilité des mediaqueries pour avoir des styles différenciés selon la résolution des écrans.
                Avec celui par défaut tu en fait 1 de plus pour les largeurs intermédiaires (tablettes) et un pour les mobiles et ça devrait déjà aller beaucoup mieux.

                Exemple
                Code:
                @media (max-width: 768px) {
                .body.bg {
                width:90%;
                }
                }
                
                @media (max-width: 480px) {
                .body.bg {
                width:95%;
                }
                }
                Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.- "ça dépend ça dépasse"
                Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
                Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

                Commentaire


                • #9
                  Je pense qu'en complétant le CSS proposé par dolmenhir dans le fichier custom.css, on répond à tous les besoins
                  Code:
                  @media (max-width: 768px) {
                     .body.bg { width:90%; }
                     .logo { font-size: 515%}
                   }
                  @media (max-width: 480px) {
                    .body.bg { width:95%; }
                    .logo { font-size: 610%}
                  }
                  A adapter selon ses préférences

                  Il est aussi possible d'ajouter des espaces durs entre les prépositions et le nom pour contrôler les sauts de ligne. Exemple "De Style En Aiguille"
                  dolmenhir aime ceci.
                  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


                  • #10
                    Bonjour

                    J'ai implanté le code css dans mon override.css
                    Au niveau du mobile, cela n'a pas changé grand chose dans la mesure où je peux toujours déplacer l'écran en horizontal

                    Commentaire


                    • #11
                      Bonsoir,

                      Il faut toujours ajouter les personnalisations en fin de fichier. C'est le principe du CSS

                      Je viens de tester ça marche !

                      Il faut retirer le . devant body. J'avais fait un copier-coller du code fourni par dolmenhir sans le relire.

                      Donc le bon code est :
                      Code:
                      @media (max-width: 768px) {
                      body.bg { width:90% }
                      .logo { font-size: 515% }
                      }
                      @media (max-width: 480px) {
                      body.bg { width:95% }
                      .logo { font-size: 610% }
                      }
                      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


                      • #12
                        Envoyé par lomart Voir le message
                        Il faut retirer le . devant body. J'avais fait un copier-coller du code fourni par dolmenhir sans le relire.
                        Désolé, c'est moi qui ai laissé trainer un point.
                        Merci à lomart pour ta vigilance
                        Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.- "ça dépend ça dépasse"
                        Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
                        Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

                        Commentaire


                        • #13
                          Effectivement, je n'avais pas vu non plus le "."
                          Cela n'a rien changé malheureusement, meme après avoir purgé le cache du mobile.
                          Est-ce que vous avez le même comportement ?

                          J'ai une piste éventuelle : en version PC, j'ai l'écart identique à gauche et à droite. Sur mobile, il n'y a que l'écart à droite. Celui de gauche est absent

                          Commentaire


                          • #14
                            Vous n'avez pas bien lu ma réponse :
                            Il faut toujours ajouter les personnalisations en fin de fichier. C'est le principe du CSS
                            Le résultat
                            Cliquez sur l'image pour l'afficher en taille normale

Nom : Image 1.jpg 
Affichages : 171 
Taille : 84,4 Ko 
ID : 2034186
                            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


                            • #15
                              Oui, désolé.
                              Je confirme, cela fonctionne

                              Merci à tous

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X