comment mettre media queries en paysage

Réduire
Ce sujet est fermé.
X
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] comment mettre media queries en paysage

    Bonjour,

    Voilà j'explique , je travail sur un site et j'utilise le template protostar (joomla 3) qui est responsive et mon probleme que mon site ne passe pas bien au niveau des mobiles et tablettes car j'aimerais déjà avoir exactement le même rendu sur mobiles et tablette que sur l'ordi donc il faudrait que je passe en paysage mais je ne sais pas du tout ou je dois modifier mon code (fichier css ou less) , dans mon fichier css j'ai le code suivant :
    @media (min-width: 768px) and (max-width: 979px) {
    .hidden-desktop {
    display: inherit !important;
    }
    .visible-desktop {
    display: none !important;
    }
    .visible-tablet {
    display: inherit !important;
    }
    .hidden-tablet {
    display: none !important;
    }
    }
    @media (max-width: 767px) {
    .hidden-desktop {
    display: inherit !important;
    }
    .visible-desktop {
    display: none !important;
    }
    .visible-phone {
    display: inherit !important;
    }
    .hidden-phone {
    display: none !important;
    }
    }

    .visible-print {
    display: none !important;
    }
    donc je ne sais pas si c'est là que je dois modifier quelque chose ?
    Et mon deuxieme probleme que j'ai créé des positions dans mon fichier index.php en ajouter juste des ligne comme:
    <jdoc:include type="modules" name="position-6" style="well" />
    sur l'ordi c'est impeccable mais sur mobile et tablette, les modules dépasse de la feuille donc je présume que je dois ajouter un autre code dans les média queries pour que ça soit pris en compte également mais voilà je ne sais pas du tout comment faire et ou je dois le faire
    Si quelqu'un pouvait au moins m'orienter sur ces deux problemes !
    Je vous remercie par avance

    Cordialement
    Mélanie

    P.S j'espère avoir été suffisamment précise

  • #2
    Re : comment mettre media queries en paysage

    Envoyé par melanie32 Voir le message
    @media (min-width: 768px) and (max-width: 979px) {
    .hidden-desktop {
    display: inherit !important;
    }
    .visible-desktop {
    display: none !important;
    }
    ces deux classes sont invérsées:

    @media (max-width: 767px) {
    .hidden-desktop {
    display: inherit !important;
    }
    .visible-desktop {
    display: none !important;
    }
    Celles ci aussi .

    Pour ajouter l'orientation tu peut créer une requete media comme celle ci :
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }

    // pour l'orientation paysage

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portait) {
    /* Styles */
    }

    //pour l'orientation portrait
    Mon site en cours de construction avec de nouvelles catégories de documents...
    https://informaticien51.fr

    Commentaire


    • #3
      Re : comment mettre media queries en paysage

      Et mon deuxieme probleme que j'ai créé des positions dans mon fichier index.php en ajouter juste des ligne comme:
      <jdoc:include type="modules" name="position-6" style="well" />
      Donnes le marquage html autour. est ce que tes position sont dans un div class="row" ou class="row-fluid' ?
      Mon site en cours de construction avec de nouvelles catégories de documents...
      https://informaticien51.fr

      Commentaire


      • #4
        Re : comment mettre media queries en paysage

        Salut,

        Merci beaucoup pour tes réponses !! Pour le premier, tu dis inverser, ça veut dire que je doit mettre le visible avant le hidden
        et pour me deuxieme les class sont row fluide, et pour le marquage html, je dois le mettre à la place du well (eh oui désolée , je débute un peu ) et comme tu à l'aire tu connaitre beaucoup plus que moi j'ai un souci avec la compatibilité avec les navigateurs sur chrome, safarie et ancienne version IE impeccable mais pour les autre c'est pas top, j'ai fais le test sur un ordi portable sous windows 8 et ce n'est pas tout à fait pareil alors si tu avais une petite piste à me donner, ça serait vraiment le top. Et dans tous les cas merci déjà pour tes réponses !!
        Mélanie

        Commentaire


        • #5
          Re : comment mettre media queries en paysage

          non cela veut dire inverser le contenu de ces selecteurs.

          .visible-desktop {
          display: none !important;
          }
          la classe visible sur le bureau (.visible-desktop) avec une propriété aucun affichage (display:none).

          quand tu regardes avec firebug autour de ton module, tu as bien une div class="container" ou "container-fluid" qui contient une div class="row" ou div class="row-fluid" ?
          Ce marquage est necessaire pour bootstrap et l aspect responsif de ton template.
          peut tu me donner le contenu de l'onglet avancé du ou des modules publiés dans cette position?
          Mon site en cours de construction avec de nouvelles catégories de documents...
          https://informaticien51.fr

          Commentaire


          • #6
            Re : comment mettre media queries en paysage

            <body class="site <?php echo $option
            . ' view-' . $view
            . ($layout ? ' layout-' . $layout : ' no-layout')
            . ($task ? ' task-' . $task : ' no-task')
            . ($itemid ? ' itemid-' . $itemid : '')
            . ($params->get('fluidContainer') ? ' fluid' : '');
            ?>">
            <!-- Body -->
            <div class="body">
            <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <?php if ($this->countModules('position-1')) : ?>
            <nav class="navigation" role="navigation">

            <TABLE style="max-width:100%">
            <TR>
            <TD>
            <jdoc:include type="modules" name="position-1" style="well" />

            </TD>
            <TD>
            <jdoc:include type="modules" name="position-2" style="well" />

            </TD>
            </TR>
            </TABLE>
            je te met un paragraphe complet de deux positions que je créé côte à côte
            merci à toi !!
            Eh en faite je te souhaite un joyeux noel avec un jour de retard !!!

            Commentaire


            • #7
              Re : comment mettre media queries en paysage

              Et pour le requete média à créer, je dois la placer dans le fichier CSS du template ou dans le less

              Commentaire

              Annonce

              Réduire
              1 sur 2 < >

              C'est [Réglé] et on n'en parle plus ?

              A quoi ça sert ?
              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
              Comment ajouter la mention [Réglé] à votre discussion ?
              1 - Aller sur votre discussion et éditer votre premier message :


              2 - Cliquer sur la liste déroulante Préfixe.

              3 - Choisir le préfixe [Réglé].


              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

              2 sur 2 < >

              Assistance au forum - Outil de publication d'infos de votre site

              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

              UTILISER À VOS PROPRES RISQUES :
              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

              Problèmes connus :
              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

              Installation :

              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

              Archive zip : https://github.com/AFUJ/FPA/zipball/master

              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
              et remplacer www. votresite .com par votre nom de domaine


              Exemples:
              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
              Télécharger le script fpa-fr.php dans: /public_html/
              Pour executer le script: http://www..com/fpa-fr.php

              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
              Télécharger le script fpa-fr.php dans: /public_html/cms/
              Pour executer le script: http://www..com/cms/fpa-fr.php

              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
              Voir plus
              Voir moins
              Travaille ...
              X