[Résolu] Photo pleine page (Créer un compte)

  • WordPress :6.1
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 21)
  • Auteur
    Messages
  • #2453679
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    Bonjour,

    Ma configuration WP actuelle 6.2

    • Version de PHP/MySQL :
    • Thème utilisé : Accelerate
    • Extensions en place : Advanced Editor Tools, Advanced WP Columns, Akismet Anti-Spam, AMP, Auto Image Attributes From Filename With Bulk Updater, Backup For WP, Contact Form 7, Easy Google Maps, GA Google Analytics, Glue for Yoast SEO & AMP, Icon List, Image Widget, Maps Builder, Simple Links, W3 Total Cache, WP All Import, Yoast SEO, optinmonster
    • Nom de l’hébergeur : OVH
    • Adresse du site : https://vertige-evasion.com/

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

    Je voudrais savoir comment faire apparaitre sur mobil  les photos  de début de page sur toute la largeur de l ‘écran (qu’il n y ai pas de bordure sur les cotés)? De même pour les photos du slider de la page d’accueil.

    Dans la version ordinateur, les photos du sliders de la page d’accueil sont sur toute la largeur de l écran et les photos de debut des pages de descriptions prennent une moitié de largeur de page.

    page d’accueil: https://vertige-evasion.com/

    une des pages de description: https://vertige-evasion.com/canyoning-grenoble-lyon-isere-vercors-chartreuse/

    Merci pour vos réponses,

    sébastien

    #2453681
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    Bonjour,

    Essayez ceci dans les CSS personnalisées:

    @media screen and (max-width:950px){
    .inner-wrap.clearfix, .slider-cycle.inner-wrap, .service-image img {
    margin:0px;
    width:100%;
    }
    }

    • Cette réponse a été modifiée le il y a 2 années par ferman.
    #2453686
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    Merci de votre réponse Ferman, mais du coup tout est dans toute la largeur de la page (les textes, les cardes…) trop près du bord à mon gout. Est-ce qu’il est possible que cela ne concerne que les photos de début de page et le slider?

    merci

    #2453688
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    Je regarde pour une solution simple.

    • Cette réponse a été modifiée le il y a 2 années par ferman.
    #2453690
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    merci!

    pour ma culture, le <span class= »token punctuation »>(</span><span class= »token property »>max-width</span><span class= »token punctuation »>:</span><span class= »token number »>950</span><span class= »token unit »>px</span><span class= »token punctuation »>) correspond à quoi? à la taille de l écran de la majorité des smartphone?</span>

    #2453709
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    Essayez en ajoutant ceci aux règles précédentes et ajustez 90% à votre convenance.

    #main p{width:90%;
    margin-left:auto;
    margin-right:auto;
    }

    …à la taille de l écran de la majorité des smartphone?

    à un peu plus que la taille de l’écran du plus grand des smartphones en position horizontale  et  des tablettes en position verticale.

    #2453717
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    Bonjour,

    la règle :<span class= »token selector »><span class= »token id »>#main</span> p</span><span class= »token punctuation »>{</span><span class= »token property »>width</span><span class= »token punctuation »>:</span><span class= »token number »>90</span><span class= »token unit »>%</span><span class= »token punctuation »>;</span> <span class= »token property »>margin-left</span><span class= »token punctuation »>:</span>auto<span class= »token punctuation »>;</span> <span class= »token property »>margin-right</span><span class= »token punctuation »>:</span>auto<span class= »token punctuation »>;</span> <span class= »token punctuation »>} ne change rien. j’ai essayer 50% pour voir aussi mais rien.</span>

    #2453718
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    et ce qui est bizzard c est qu avec la 1ere règle que vous m avez donné, toutes les pages ne sont pas modifiées sur smartphone…vous savez pourquoi?

    #2453723
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    Chez moi, je vois que les CSS que vous avez mises fonctionnent. Il semble que vous venez de faire un essai avec  le deuxième code; les paragraphes étaient bien réduits en largeur. Je suppose aussi que vous venez d’enlever ce deuxième code et les paragraphes sont revenus en pleine largeur.

    Cela n’influait pas sur les CSS mais dans votre code, les accolades étaient mal mises; il faut écrire:

    @media screen and (max-width:950px) {
    .inner-wrap.clearfix,
    .slider-cycle.inner-wrap,
    .service-image img {
    margin:0px;
    width:100%
    }
    #main p{width:90%;
    margin-left:auto!important;
    margin-right:auto!important;
    }
    }

     

    Vous voyez que j’ai également ajouté !important pour la largeur des paragraphes. Il arrive que ce que l’on voit dans le simulateur d’écran smartphone sur PC  (l’outil utilisé pour déterminer les CSS sur mobile) ne soit pas bien reproduit dans les CSS personnalisées. Le !important « renforce » la règle. Encore que dans votre cas ça ne semble pas être nécessaire. Je pense plutôt qu’il y a un problème de cache.

    Remettez les deux codes comme ci-dessus. Dites-moi quand c’est fait et je vais regarder sur mon mobile et sur PC.

    Dites-moi aussi sur quelles pages le code ne fonctionne pas. Pour moi il fonctionne sur les pages que j’ai essayées mais je n’ai pas tout testé.

     

    • Cette réponse a été modifiée le il y a 2 années par ferman.
    #2453727
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    Merci beaucoup e votre aide.

    je ne vois pas de changement… certaines pages comme celle là ne sont pas du tout modifié:https://vertige-evasion.com/via-ferrata-grenoble-lyon-isere-vercors-chartreuse/

    En ce qui concerne les pages qui ont maintenant la photos de début de page sur toutes la largeur de l écran du tel, tout ce qui est en dessous (texte,cadre, gallerie photo…) est également dans toute la largeur. j’aurais aimé garder une marge droite et gauche pour ces éléments.

    #2453728
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    En ce qui concerne les pages qui ont maintenant la photos de début de page sur toutes la largeur de l écran du tel, tout ce qui est en dessous (texte,cadre, gallerie photo…) est également dans toute la largeur.

    J’ai bien compris ça et avec le code actuel, ça ne devrait pas. Autre chose, normalement je devrais voir les codes CSS apparaître sur toutes les pages mais ce n’est pas le cas. Où exactement avez-vous mis les CSS personnalisées? Comme sur la pièce jointe? Si oui, il doit y avoir un problème de cache. Pouvez-vous vider le cache de WPsupercache?

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2453730
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    tous les ajouts de code sont dans le css additionnel de « personnaliser »

    j’ai vidé le cache de w3 total cache, et maintenant, tout est dans la largeur de l’écran sauf la photo en début de page.

    #2453731
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    il y a en fait une légère bordure droite et gauche des textes (ce qui est très bien), mais la photo de début de page a la même (elle n’est pas sur toute la largeur de l ‘écran)

    #2453732
    ferman
    Modérateur
    Maître WordPress
    7590 contributions

    Ce sont les photos à l’intérieur d’un paragraphe et elles prennent donc la largeur du paragraphe. Ajoutez ce qui suit. On va finir par y arriver.

    #main p img.alignleft {
    max-width:115%;
    margin-left:-5%;
    }

    nb: les images sont aussi agrandies en format tablette (jusqu’à 950px de largeur d’écran). Vérifiez et dites-moi s’il y a encore quelque chose qui cloche. Attention au cache.

    #2453733
    chvxrouge@gmail.com
    Participant
    Initié WordPress
    49 contributions

    c’est parfait avec un réglage -8%.

    merci beaucoup!!!!

    est-ce qu’il y a moyen également de créer une bordure droite et gauche au niveau de la « galerie photo » (les 4 petites images disposées en carré sur telephone) et sur les vignettes d’activités?

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