h1 sur image de fond – vision desktop différente suivant écran (Créer un compte)

  • WordPress :5.8
  • Statut : non résolu
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #2387870
    jaginho
    Participant
    Chevalier WordPress
    114 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : ?
    • Thème utilisé : SEO mag
    • Extensions en place : plein dont Elementor
    • Nom de l’hébergeur : OVH
    • Adresse du site : www . nicolas-aubineau . com

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

    Actuellement, la home est en Elementor, la partie haute me convient avec une image de fond et le h1 dessus la tête du Diététicien 🙂 . Sauf que sur desktop avec écran relativement carré, cela fonctionne mais plus l’écran est en format paysage, plus l’image s’allonge et plus le h1 se met sur sa tête 🙁 .

    Ma question est : comment faire pour que le texte soit toujours au même endroit quelle que soit la taille et la dimension de l’écran (écran carré ou paysage) ?

    Merci

    PS : pas de problème sur mobile, il y a un format spécifique.

    #2389198
    Thanatos
    Participant
    Initié WordPress
    17 contributions

    Bonsoir,

    je viens de regarder un petit peut, mais il y a de l’empilement d’élément.

    je supprimerais <span class= »styles-clipboard-only »> « </span><span class= »webkit-css-property »>background-size</span><span class= »styles-name-value-separator »>: </span><span class= »value »>cover</span>; » dans :

    .elementor-10626 .elementor-element.elementor-element-4f57a21e:not(.elementor-motion-effects-element-type-background)

    puis dans:
    <div class= »query-list query-matches »>
    <div class= »query editable »>
    <div class= »query-list query-matches »>
    <div class= »query editable »>@media <span class= »query-text »>(max-width: 767px)</span></div>
    </div>
    <div class= »styles-section-subtitle »><span class= »devtools-link » tabindex= »0″ title= »https://www.nicolas-aubineau.com/wp-content/cache/used-css/1/476674c9f7f491104897ff6724690e41/used.min.css?ver=1637057022:1″ role= »link »>used.min.cs<span class= »devtools-link-ellipsis »>…</span>637057022:1</span></div>
    <div><span class= »selector » tabindex= »-1″><span class= »simple-selector selector-matches »>.elementor-10626 .elementor-element.elementor-element-4f57a21e:not(.elementor-motion-effects-element-type-background)</span></span></div>
    </div>
    <div>je rajouterais <span class= »styles-clipboard-only »> »</span><span class= »webkit-css-property »>background-size</span><span class= »styles-name-value-separator »>: </span><span class= »value »>cover</span>; »</div>
    <div></div>
    </div>
    <div>après je reprendrais la mise en forme pour le media à 770 pour le H1 pour la partie standard en le modifian un peut: dans</div>
    <div>
    <div class= »styles-section-title styles-selector »>
    <div class= »query-list query-matches »>
    <div class= »query editable »>@media <span class= »query-text »>(max-width: 770px)</span></div>
    </div>
    <div class= »styles-section-subtitle »><span class= »devtools-link » tabindex= »0″ title= »https://www.nicolas-aubineau.com/wp-content/cache/used-css/1/476674c9f7f491104897ff6724690e41/used.min.css?ver=1637057022:1″ role= »link »>used.min.cs<span class= »devtools-link-ellipsis »>…</span>637057022:1</span></div>
    <div><span class= »selector »><span class= »simple-selector selector-matches »>.home h1</span></span><span class= »sidebar-pane-open-brace »> {</span></div>
    </div>
    <div class= »style-properties matched-styles monospace »>
    <div class= »tree-outline-disclosure »>

    <span class= »webkit-css-property »>padding-top</span><span class= »styles-name-value-separator »>: </span><span class= »value »>100px!important</span>;

    </div>
    </div>
    <div class= »sidebar-pane-closing-brace »>}</div>
    </div>
    <div>modifier le <span class= »webkit-css-property »>padding-top de 100px à 80% et appliquer le même type pour l’écran par defaut.</span></div>
    <div></div>
    <div>Cordialement,</div>
    <div>Franck</div>

    • Cette réponse a été modifiée le il y a 2 années et 11 mois par Flobogo. Raison: retrait du mode "privé" (aucune info compromettante)
    #2389205
    Flobogo
    Modérateur
    Maître WordPress
    20471 contributions

    Bonjour @thanatos :

    1. Merci de ne pas mettre de réponse en mode « privée » lorsqu’elles ne contiennent aucune info compromettante. POur rappel, nous sommes ici sur un forum d’entraide mutuelle, pas individuelle. Une réponse apportée à l’un doit pouvoir être lue par d’autres … ce qui n’est pas possible si c’est une réponse privée
    2. SVP, ne faites pas de copier-coller direct sur le forum, le code HTML induit est mal interprété. Passez par le presse-papier pour débarrasser votre texte de tous ses « résidus ». Sinon, votre réponse devient illisible.
3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.