Rock4Temps (Créer un compte)

Toutes mes réponses sur les forums

15 sujets de 496 à 510 (sur un total de 614)
  • Auteur
    Messages
  • en réponse à : Problème d’affichage selon support #2354415
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    je redonne le code  modifié en ajoutant la règle !important, supprimer l’ancien code et entrez celui-ci

    /************************Inversion de colonnes ******************************
    
    	Cette méthode repose sur l’inversion du sens d’empilement des éléments sur 
    	l’axe principal de la flexbox, ici la direction horizontale, 
    	grâce à la propriété flex-direction.
    	
    	Ces règles ne tiennent pas compte des marges (gouttières des colonnes),
    	et donc ne s'applique qu'au cas le plus courant section avec une ligne 
    	a deux colonnes avec marge nulles (les colonnes se touchent)
    
       - Ajouter la classe inverser-colonnes--section dans les paramètres avancés
    	 de la section contenant les colonnes à réorganiser: Onglet avancées\Id & classes CSS\Classes CSS
    	 
       - Ajoutez la classe inverser-colonnes--ligne dans les paramètres avancés de 
         la ligne ou l'on inverse les colonnes: Onglet avancées\Id & classes CSS\Classes CSS
    	 
    **********************************************************************************/ 
    
    @media only screen and (max-width : 980px) {
    	
      .inverser-colonnes--section .inverser-colonnes--ligne {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-flex-direction: column-reverse!important;
        -ms-flex-direction: column-reverse!important;
        flex-direction: column-reverse!important;
    	
      }
      
    }

    en réponse à : Problème d’affichage selon support #2354409
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Ce que vous avez fait est correct

    en réponse à : Problème d’affichage selon support #2354408
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    vous devez vider le cache pour que les règles CSS soit prise en compte:
    Avec le navigateur  CHROME :  CTRL + SHIFT + Suppr

    en réponse à : Problème d’affichage selon support #2354398
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Vous n’avez pas entrez les régles CSS ?
    Les colonnes ne sont pas inversé sur mobile et tablettes

    en réponse à : Problème d’affichage selon support #2354390
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Comme il y a beaucoup de modifications a faire, vous allez commencer par faire une sauvegarde de la page actuelle.
    Effectuer une sauvegarde en cliquant sur l’icône de la barre d’outils du bas comme dans la 1ère image ci-jointe.

    La disposition sur mobile et tablette du fait de l’empilement des colonnes n’est pas optimal,
    car on se retrouve avec texte image puis image texte puis texte image.
    j’ai des règles css qui permettent d’inverser les colonnes mais elles ne s’appliquent
    qu’a des section à 2 colonnes, hors la section centrale contient trois colonnes.

    vous allez devoir changer la disposition des colonnes sur PC dans l’ordre suivant.
    1ère section : image texte
    2ème section : texte image image
    3ème section image texte

    Pour modifier l’ordre les colonnes cliquer sur l’ icône réglages de rangée afin d’afficher le personnaliseur pour la rangée contenant les colonnes a inverser( voir photos : disposition-colonnes). il vous suffit dans l’onglet contenu de faire un simple glissser déposer pour ré-organiser les colonnes.
    faites cette opération pour les trois sections.

    Vous allez maintenant renseignez le code CSS pour modifier l’ordre des colonnes sur mobile
    A partir du back office de WordPress
    menu Apparence > personnaliser > css additionnel entrez le code ci dessous:

    /***********Inversion de colonnes pour la Section Résaux Sociaux******************
    
    	Cette méthode repose sur l’inversion du sens d’empilement des éléments sur 
    	l’axe principal de la flexbox, ici la direction horizontale, 
    	grâce à la propriété flex-direction.
    	
    	Ces règles ne tiennent pas compte des marges (gouttières des colonnes),
    	et donc ne s'applique qu'au cas le plus courant section avec une ligne 
    	a deux colonnes avec marge nulles (les colonnes se touchent)
    
       - Ajouter la classe inverser-colonnes--section dans les paramètres avancés
    	 de la section contenant les colonnes à réorganiser
    	 
       - Ajoutez la classe inverser-colonnes--ligne dans les paramètres avancés de 
         la ligne ou l'on inverse les colonnes.
    	 
    **********************************************************************************/ 
    
    @media only screen and (max-width : 980px) {
    	
      .inverser-colonnes--section .inverser-colonnes--ligne {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    	
      }
      
    }

    Ensuite comme indiqué en commentaire dans le code ci-dessus, pour la 1ère section :

    cliquer sur l’icône Réglage de la 1ère section et entrez la classe CSS :
    inverser-colonnes–section comme dans l’image : parametres-avancee-section

    Cliquer sur l’ icône réglages de rangée et entrez la classe CSS :
    inverser-colonnes—ligne comme dans l’image : parametres-avancee-rangee.
    renouveler ces opérations pour la troisième section.
    Ainsi on aura sur mobile un empilement des colonnes texte image,texte image image, texte image.

    Quand vous aurez terminé ces modifications on pourra continuer la suite des modifs.

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    en réponse à : Problème d’affichage selon support #2354319
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Je profite d’une pause pour vous répondre.

    Ok pour les trois sections, mais c’est mieux d’alterner  texte a gauche et image a droite, puis a la section suivante image a gauche et texte a droite. C’est une mosaique en terme de webdesign.

    Préciser le type de pc avec sa résolution ou la mise en page ne vous convient pas et pourquoi?

    Maintenant a vous de régler le responsive pour tablette et mobile je ne peux le faire a votre place.

    Car la encore il y aura certainement une optimisation a faire notament l’inversion de colonne sur mobile pour la mosaique

    Bonne soirée

     

     

    en réponse à : Problème d’affichage selon support #2354243
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Travail oblige je dois  m’absenter, préciser exactement pour la page d’accueil ce que vous souhaiter,
    je verrais demain  s’il est possible d’améliorer.

    en réponse à : Problème d’affichage selon support #2354242
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Oui mais alors il faut passer par des règles css.
    Si on veut optimiser le responsive, un minimun est de
    connaitre le CSS.
    il y a un réglage basique tels que l’inversion de colonne sur mobile qui
    n’est pas prévu nativement par le constructeur DIVI contrairement a Elementor
    et qu’on ne peut régler qu’avec  des règles CSS.

    en réponse à : Problème d’affichage selon support #2354237
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Vous devez seulement modifier les réglages qui présentent un icône mobile au survol,
    sinon cela veut dire que ce réglage est commun quelque soit le support.

    en réponse à : Problème d’affichage selon support #2354225
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Bonjour,

    Dans le Visual Builder de DIVI pour gérer le responsive, vous cliquez  a gauche dans la barre d’outils du bas sur
    l’icône Tablette(voir photo ci-jointe) pour avoir une vue en mode tablette.
    Il vous suffit de reprendre votre mise en page avec les différends réglages  des sections ou modules ou vous apercevez a nouveau
    l’icône mobile en survolant le réglage.
    En survolant un réglage, en cliquant sur l’icône mobile vous verrez alors en dessous l’icône tablette avec son réglage.
    comme dans la photo ci-jointe pour l’alignement du texte en mode tablette.
    Une fois tous les réglage de la page terminé en mode tablette, faite de même en cliquant dans la barre d’outils du bas sur l’icône Mobile,
    pour avoir une vue en mode mobile.
    Attention! vous devez toujours faire les réglages dans l’ordre suivant:
    PC, Tablette, Mobile.

    Cordialement

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    en réponse à : [Résolu] Modifier Largeur Editeur Gutenberg #2354151
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    je précise que les blocs textes  pour la page ont une propriété d’alignement a gauche, donc si les blocs font 1200px de large ils devraient être aligné avec le bord gauche de la photo.

     

    en réponse à : [Résolu] Modifier Largeur Editeur Gutenberg #2354146
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    ci-joint photos edition-article a 840px de large et aussi edition-page avec la photo a 1200px et le corps du texte qui reste a 840px de large

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    en réponse à : [Résolu] Modifier Largeur Editeur Gutenberg #2354145
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Je te remercie, après ton message précédent j’ai consulté la documentation et ajouter les mêmes lignes de code
    dans le fichier function.php de mon thème enfant.
    ça marche aussi chez moi, si je ne souhaite modifier que les articles qui ont une largeur de 840px en front,
    mais l’éditeur est aussi en largeur de 840px pour les pages alors qu’elles font 1200px de large en front.
    seule l’image est a 1200px car elle a la propriété d’alignement grande largeur qui est réglée a 1200px dans
    le fichier style-editor.css:
    .wp-block[data-align= »wide »] {
    max-width: 1200px;
    }
    tous les autres blocks restent a 840px de largeur.

     

    en réponse à : [Résolu] Modifier Largeur Editeur Gutenberg #2354111
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Bonjour,

    Je suis allé voir la documentation très intéressante, ce qui m’a permis aussi de modifier la palette de couleur de Gutenberg en accord avec la charte graphique.

    En inspectant le code j’ai essayé de trouver des sélecteurs pour régler mon problème de largeur différente entre article & page.
    j’ai renseigné le code suivant dans style-editor.css

    body.post-type-post .wp-block {
        max-width: 840!important;
    	}
    	
    	body.post-type-page .wp-block {
        max-width: 1200px!important;
    	}

    hélas ça ne surchage pas la classe .wp-block qui reste a 480px par défaut.

     

    en réponse à : [Résolu] Modifier Largeur Editeur Gutenberg #2354084
    Rock4Temps
    Participant
    Maître WordPress
    623 contributions

    Merci, mais comment faire varier automatiquement cette largeur selon que l’on rédige un article ou une page qui n’ont pas la même largeur ?

    L’article a une sidebar a 30 % de la largeur de 1200 px et  donc l’article a une largeur de 840 px, contrairement a une page qui n’a pas de side bar et fait donc 1200 px  de large.

    • Cette réponse a été modifiée le il y a 2 années et 2 mois par momofr@free.fr. Raison: Ménage
15 sujets de 496 à 510 (sur un total de 614)