CSS – Syntaxe classe additionnelle pour media queries (Créer un compte)

Accueil › Forums › WordPress › CSS – Syntaxe classe additionnelle pour media queries
  • WordPress :5.2
  • Statut : non résolu
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • 2 mai 2019 à 14 h 56 min #2259067
    Noknok
    Participant
    Initié WordPress
    32 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : ?
    • Thème utilisé : Basel
    • Extensions en place : plein !
    • Nom de l’hébergeur : OVH
    • Adresse du site : https://www.dropaline.fr/

    Problème(s) rencontré(s) :

    Bonjour à tous

    Bien que j’aie la possibilité de définir dans chaque colonne pour quels terminaux je veux la montrer ou la cacher, je ne dispose pas de choix suffisants (je n’ai que 4 options – cf image). Deplus, il n’est possible d’agir que sur les colonnes, pas sur les rangées.

    Je voudrais donc spécifier une classe additionnelle pour chaque rangée ou colonne que je veux afficher ou pas, en foction de la taille d’écran du visiteur.
    Après recherche, j’ai découvert l’existence des media queries. Mais j’ai un problème de syntaxe.
    Je travaille avec l’éditeur de page.

    Quand je veux ajouter une spécification, d’habitude, je procède ainsi :
    En haut à droite de mon éditeur, dans le bandeau bleu, je clique sur la roue et je dois rentrer un CSS qui a ce genre de syntaxe :
    .inter { letter-spacing: 4px; }
    Ensuite, je vais dans l’élément (par ex. un bloc de texte) et dans le champ « classe additionnelle », je tape « inter »
    Facile.

    Or, ce que j’ai trouvé sur le net pour mon problème actuel a cette allure :
    « @media only screen and (max-width: 600px) and (min-width: 400px) {…} »

    Question :
    Que dois-je écrire exactement pour faire apparaître ou pas ma colonne ou ma rangée dans le champ CSS de ma page ?

    Merci par avance pour votre aide.

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    2 mai 2019 à 16 h 59 min #2259107
    ouiouiphoto
    Participant
    Maître WordPress
    1539 contributions

    Bonjour

    Il faudrait nous donner l’URL de la page concernée et le fonctionnement que tu souhaite sur cette page

    2 mai 2019 à 17 h 05 min #2259114
    Noknok
    Participant
    Initié WordPress
    32 contributions

    Pour l’instant, il s’agit juste de la page d’accueil. L’adresse est dans mon en-tête.
    Mais, peu importe. J’ai juste besoin de connaître le mode de syntaxe pour pouvoir le décliner.
    merci de ton aide.

    2 mai 2019 à 17 h 10 min #2259117
    ouiouiphoto
    Participant
    Maître WordPress
    1539 contributions

    Si c’est juste la syntaxe voici une page qui explique https://www.alsacreations.com/article/lire/930-css3-media-queries.html

    2 mai 2019 à 17 h 14 min #2259123
    Noknok
    Participant
    Initié WordPress
    32 contributions

    J’ai vu cette page. Mais elle ne contient pas ma réponse. Que dois-je écrire exactement dans le champ CSS de ma page et dont je ne reprendrai que le titre dans le chap « classe additionnelle » ? Il semble qu’il faille toujours commencer par un point, puis… ???

    2 mai 2019 à 17 h 22 min #2259125
    ouiouiphoto
    Participant
    Maître WordPress
    1539 contributions

    Ca dépend de ce que tu veux faire et des classes concernées d’ou m’a demande initiale 😉 Comme indiqué dans la page la syntaxe est

    @media screen and (min-width: 200px) and (max-width: 640px) {
      .bloc {
        display:block;
        clear:both;
      }
    }

    Donc tu indique quand cela arrivera avec

    @media screen and (min-width: 200px) and (max-width: 640px) {

    }

    et ensuite entre les accolades tu mets du CSS classique. Donc si ta class est .colonne et que tu veux la cacher tu peux mettre

      .colonne {
        display:none;
      }

    2 mai 2019 à 17 h 28 min #2259128
    Noknok
    Participant
    Initié WordPress
    32 contributions

    Merci beaucoup pour ton aide. Je pense avoir compris.

    4 mai 2019 à 17 h 22 min #2259445
    Noknok
    Participant
    Initié WordPress
    32 contributions

    J’ai limité mes exigences, mais même après avoir essayé de plein de manières différentes, je n’y arrive toujours pas.
    NB : je n’aborde volontairement pas le cas du mobile car il fait l’objet d’une colonne différente que je peux personnaliser.

    Sur la page d’accueil : https://www.dropaline.fr/
    tout va bien pour les petits et moyens écrans. Mais quand on passe à du grand, cela ne va plus (texte sur image). Impossible de paramétrer un espace vide qui marche pour tous. Perso, je suis un un 28′ (je sais, ce n’est pas le cas de tous les visiteurs).
    Néanmoins, je voudrais, à partir des écrans 21′ (voire 17′, dites moi ce que vous en pensez) faire disparaitre les 2 rangées qui contiennent logo et texte pour en faire apparaître deux autres bien calibrées pour les grands formats.

    J’ai essayé de mettre quelque chose comme ça dans le CSS de ma page :
    @media screen and (max-width: 1280px) {
    .rangmoy {
    display:table-row;
    }
    }

    Puis je place « .rangmoy » dans le champ « classe additionnelle » de mes rangées.
    Ben, ça ne marche pas. Pour le moment, j’ai donc enlevé tout le code qui ne sert à rien…
    J’ai certainement commis des erreurs mais lesquelles ? Une idée ?

    • Cette réponse a été modifiée le il y a 4 années et 1 mois par Noknok.
    • Cette réponse a été modifiée le il y a 4 années et 1 mois par Noknok.
  • Auteur
    Messages
8 sujets de 1 à 8 (sur un total de 8)
  • Vous devez être connecté pour répondre à ce sujet.