[Résolu] CREER UN MENU SUR UN SITE ONE PAGE (ASTRA ac Vlogger Template) (Créer un compte)

  • WordPress :6.4
  • Statut : résolu
5 sujets de 16 à 20 (sur un total de 20)
  • Auteur
    Messages
  • #2468220
    Cirkl Services
    Participant
    Initié WordPress
    15 contributions

    Bonsoir,

    Sur PC :

    Les nouveaux codes CSS ont bien harmonisé les distances entre les bords des conteneurs et leurs contenus.

    J’ai refait le conteneur Conception-Rédaction Copywriting (il m’avait en effet échappé), ce qui a réglé son problème.

    Néanmoins, ces problèmes de distances entre les titres et les contenus en dessous sont toujours là pour le conteneur Rédaction Web.

    Sur Mobile :

    Le premier conteneur en dessous du titre s’est décalé sur la gauche.

    Quant au menu, je l’avais fait par la voie habituelle, selon le chemin que vous avez indiqué, comme vous le verrez sur les pièces jointes.

    Ma liste d’extension :

    • Akismet Anti-spam: Spam Protection
    • Backuply
    • FileOrganizer
    • Imagify
    • Limit Login Attempts Reloaded
    • Loginizer
    • Modèles de démarrage
    • Newsletter, SMTP, Email marketing and Subscribe forms by Brevo
    • o2switch – WpTiger
    • Redirection
    • Spectra
    • UpdraftPlus – Sauvegarde/Restauration
    • Wordfence Security
    • WP 2FA – Two-factor authentication for WordPress
    • WP Statistics
    • Yoast SEO

    Je les ai désactivé une par une, puis refresh le site à chaque fois sur mobile, et ça n’a rien changé, le menu n’y fonctionne toujours pas.

    J’ai fait quelques recherches aussi pour voir si des extensions pouvaient poser des problèmes avec les menus, et je n’ai rien trouvé.

    D’avance, merci.

    • Cette réponse a été modifiée le il y a 1 mois et 3 semaines par Cirkl Services.
    #2468289
    Rock4Temps
    Participant
    Maître WordPress
    971 contributions

    Bonsoir,

    Supprimer les codes précédent, e entrez celui-ci/

    /* 1ère section en dessous du header 
    suppression du décalage a gauche */
    @media only screen and (max-width: 767px){
    .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-98c7537a > .uagb-container-inner-blocks-wrap {
    flex-wrap: nowrap!important;
    }
    }


    @media(max-width:600px){

    /* Icônes Réseau sociaux */
    .wp-block-uagb-container.uagb-block-22cc32af .wp-block-image img{
    width:65px!important;
    }

    /* Logo header */
    header .custom-logo-link img {
    max-width: 90px!important;
    }

    /* titre header */
    h1.wp-block-heading{
    font-size:32px!important;
    }

    /* titre header */
    h1.wp-block-heading:first-child{
    margin-top:4em!important
    }

    /* titre H2 */
    h2.wp-block-heading{
    font-size:40px!important;
    }

    /* titre H3 */
    h3.wp-block-heading{
    font-size:35px!important;
    }

    /* Inversion colonne sur mobile
    classe columns-reverse à ajouter
    aux paramètres avancé du bloc colonnes */
    .columns-reverse{
    display: -webkit-flex!important;
    display: -ms-flex!important;
    display: flex!important;
    -webkit-flex-direction: column-reverse!important;
    -ms-flex-direction: column-reverse!important;
    flex-direction: column-reverse!important;
    }

    }

    .wp-block-uagb-container:not(:first-child){
    padding:2em!important;
    }

    •  Régler le problème de décalage a gauche de la 1èrer section sous le Header.
    • J’ai modifié les tailles pour les titres H2 & H3 sur mobile qui étaient trop imposante.
    • J’ai ajouté une régle CSS pour inverser les colonnes sur mobiles.
    vous avez en terme de WebDesign une mosaique c’est a dire une sucession de différentes section avec:
    Image Texte
    Texte Image
    Image Texte

    Ce qui doit donner pour les  Mobile sur une colonne:
    Image
    Texte
    Image
    Texte
    Image
    Texte

    hors ce n’est pas le cas, car vous devez inverser les colonnes par exemple pour les sections:
    Rédaction WEB, Autres formes d’écriture etc..
    Pour cela comme c’est expliqué dans le code ajouter dans les paramétres avancés du bloc colonnes
    par exemple pour la section Rédaction WEB la classe: columns-reverse
    cela marche pour toutes les sections excepté  Ecriture Publique, est elle construite différement des autes section ?

    Pour le menu Mobile, je ne sais pas, il n’ y a pas d’erreur javascript dans la console de chrome.
    Faite d’abord une sauvegarde de votre site avec UpdraftPlus,
    puis désinstaller votre thème Astra, puis l’installer à nouveau.
    Sinon essayer en activant un autre thème léger comme GeneratePress

    #2468293
    Cirkl Services
    Participant
    Initié WordPress
    15 contributions

    Bonsoir,

    Merci pour le nouveau CSS, cela a effectivement recentré le sous-titre du site.

    Pour la suite, je ne vous suis plus. L’alternance des images et du texte dans les différentes sections est volontaire, pourquoi devrais-je changer cela ? Cela donne une alternance image-texte-texte-image sur mobile, qui reflète ce que donne le site sur ordinateur, pourquoi est-ce une mauvaise chose ?

    Quant à la section Ecriture Publique, elle n’a rien de différent des autres, elle est construites à partir des mêmes éléments, et de la même façon ; tout comme les sections Conception-Rédaction et Rédaction Web, qui ont toujours cette inexplicable distance entre le titre de la section et le reste du contenu.

    Sinon, j’ai désinstaller/réinstaller le thème Astra et rien n’a changé, le menu est toujours inutilisable sur mobile.

    D’avance, merci.

    #2468304
    Rock4Temps
    Participant
    Maître WordPress
    971 contributions

    L’alternance Image Texte Image Texte est préférable sur mobile
    cela évite d’avoir de long pavé de texte a lire comme avec l’alternance
    Image Texte Texte Image.

    Aprés ce que je vous propose n’est pas une obligation, mais en régle générale
    du même ordre on ne fait pas des paragraphes de plus de 4 lignes.
    Pas plus de 80 caractères par ligne, car un  retour a ligne plus fréquent
    évite la fatigue oculaire, c’est une régle d’ergonomie.

    Quand on fait un site WEB, il y a des régles de WebDesign, d’Ergonomie,
    d’Accessibilité a respecter.

    Je trouve seulement qu’il y a trop de marge, pour la 1ère section avec le header
    et la section Conception-redaction que l’on peut rectifier avec ce  code:

    .wp-block-uagb-advanced-heading.uagb-block-039d9eb0{
    margin: 0!important;
    }

    Pour le menu sur mobile, je n’ai pas de solution a votre problème.

     

    #2468353
    Cirkl Services
    Participant
    Initié WordPress
    15 contributions

    Bonjour,

    Merci pour vos conseils en matière de web design (ce n’est clairement pas mon métier), j’ai fait les modifications nécessaires.

    Il ne reste qu’un seul et éternel problème : le menu qui ne fonctionne pas sur mobile.

    Je vais ouvrir un nouveau sujet pour traiter ce problème en particulier.

    Merci beaucoup, vous m’avez été d’une grande aide.

5 sujets de 16 à 20 (sur un total de 20)
  • Vous devez être connecté pour répondre à ce sujet.