[Résolu] Section hero sur mobile

Salut,

Pour afficher ma section hero sur mobile, Gemini m’a dit*

@media screen and (max-width: 768px) and (orientation: portrait) {
  .hero {
    height: 100vh;
    height: 100dvh;
  }
}

Euh… ça le fait ? On peut améliorer le code ou c’est bon et je peux mettre ça en prod ?

* on dirait pigeon vole

Je suis en plein brainstorming avec ChatGPT et Gemini. Je viens de connecter tous mes neurones

Je réalise mes manques jusqu'alors.

Bonjour, si tu nous parlais de la problématique rencontrée en nous indiquant à quoi correspond cette class dans ton code, nous pourrions peut être mieux te répondre.

>> et je peux mettre ça en prod ?
Toujours tester en local ou en preprod

Coucou casper2

Merci de ta proposition d’aide, je verbalise pour l'heure mes besoins et fais des modifications en préprod comme tu dis.

Je passe en résolu pour l’instant pour ne pas prendre de votre temps d’entraide et que vous profitiez aussi de ce beau soleil.

Quand j'aurai fini la préprod, je viendrai en reparler sans doute sur le forum pour avoir des avis.

salut

a écrit :
Je viens de connecter tous mes neurones

en utilisant chapgpt et autres IA, tu en aura de moins en moins de neurones.

@drphilgood : on est d’accord

Il faut un juste équilibre, comme en tout.

Bonjour,

Le 100vh suivi de 100dvh c'est probablement une bonne idée : il te faut tester avec un iOS 26.x (iPhone) avec Safari pour le savoir. La "bar" / safe area ("Compact" par défaut) est une belle invention de m... (qui touche même les devs front end des sites Apple vu ce que je vois dans leurs CSS ).

La Media Query : elle n'est pas Mobile First ce qui à terme, dans un projet pro, est une mauvaise pratique mais ce n'est pas "faux" non plus. Plus difficile de travailler à plusieurs et maintenance un poil plus compliquée quand tu as l'habitude de travailler comme ça (i.e. c'est un détail).
portrait / paysage : bah es-tu sûr de ne pas le vouloir dans les 2 orientations ? Dans un cas OK, dans l'autre non