[Résolu] Mon site n’est plus responsive

  • WordPress :4.9.4
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #2147089
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 4.7.7
    • Thème utilisé : Shoreditch
    • Extensions en place : antispam bee; child theme configurator; contact form 7; document gallery; GADWP; responsive accordion and collapse; speed up – browser catching; udraftplus; widget title links; WP blog and widget; wp sitemap page; yoast seo
    • Nom de l’hébergeur : gandi
    • Adresse du site : http://www.optimumhumanis.fr

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

    Bonjour,

    • Mon site n’est plus vraiment responsive puisque le bandeau de la page d’accueil est rogné sur une vue téléphone… Comment faire ?

    Je vous remercie beaucoup.

    #2149140
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    Je pense que cela vient des marges mises en place sur la version pc. Si j’ajoute une extension comme WPtouch, pensez-vous que cela puisse régler le problème ?

    Merci d’avance.

    #2150395
    Flobogo
    Modérateur
    Maître WordPress
    14639 contributions

    Bonjour,

    Si le seul problème sur écran de téléphone concerne l’image d’en-tête, ça peut peut-être s’arranger en CSS.

    #2150504
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    Oui, effectivement, c’est seulement l’image d’en-tête qui pose problème… Pouvez-vous m’aider à trouver le bon code ?

    Merci beaucoup 🙂

     

    #2150837
    Flobogo
    Modérateur
    Maître WordPress
    14639 contributions

    Le problème ne venait pas de l’image d’en-tête (qui se redimensionne correctement), mais d’une marge CSS que vous avez mise au contenu, ligne 315  du CSS de votre thème-enfant, qui convient pour écran large mais pas en-dessous du format tablette.

    Il faut donc ajouter ceci

    @media screen and (max-width: 600px) {
    .site-content-wrapper {
        margin-left: 0px;
    }
    }

     

    #2150892
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Je l’ai ajouté dans le CSS additionnel mais rien ne se passe…

    #2151420
    Flobogo
    Modérateur
    Maître WordPress
    14639 contributions

    Vous avez mis (max-width: 800px;) au lieu de 600px; mais en effet, il persiste un problème.

    @philyon, autre modérateur, trouvera peut-être comment arranger ça.

    #2151781
    PhiLyon
    Modérateur
    Maître WordPress
    19605 contributions

    Bonjour.

    En redimensionnant l’image correctement avant de l’insérer, il n’y a pas de problème.

    🙂

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2152071
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    Je vois ça, effectivement 🙂

    Mais comment avez-vous fait ?

    Merci beaucoup

    #2152243
    PhiLyon
    Modérateur
    Maître WordPress
    19605 contributions
    #2152249
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    Bonjour,

    J’ai remplacé l’image actuelle par l’image de dropbox mais ça ne change rien : lorsque j’accède au site avec mon téléphone, la citation est coupée…

    Peut-être que je ne fais pas la bonne manip ?

    Merci en tout cas 🙂

    #2152252
    PhiLyon
    Modérateur
    Maître WordPress
    19605 contributions

    Essaies de mettre ça dans les media queries

    .entry-hero, .site-content-wrapper .has-post-thumbnail .entry-header {
        background-size: contain;
    ]

    🙂

    #2152257
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    ça fonctionne, l’image n’est plus rognée. 🙂

    En revanche, elle est encadrée de deux bandes grises maintenant…

    #2152259
    PhiLyon
    Modérateur
    Maître WordPress
    19605 contributions

    Toujours dans les media queries essaies de rajouter ça

    .entry-hero::before, .site-content-wrapper .has-post-thumbnail .entry-header::before {
        background: none);
    }

    🙂

    #2152260
    Julie1402
    Participant
    Initié WordPress
    29 contributions

    C’est parfait, merci beaucoup 🙂 Vous êtes vraiment incollable sur WordPress 🙂

    Et merci beaucoup aussi à Flobogo

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