Discussion :

[diane621]

Bonjour,

Lorsque je diminue la page le bloc de texte ne reste pas centrer horizontalement et verticalement sur l'image ?
J'ai une solution c'est les media queries mais il me faudrait faire énormément pour replacer le texte à chaque fois au bon endroit .
Avez-vous une explication et une solution. Merci

Voici le morceau de code: https://jsfiddle.net/rz07d8o3/

Par exemple à 1024px de largeur le texte descend :


Merci

[psychadelic]

c'est parce que le positionnement du texte n'est pas assujetti à celui de l'image; sa taille aussi du reste...

[diane621]

Merci mais j'ai pas très bien compris vôtre réponse

Est que je peux avoir un peux plus d'explication

[NoSmoking]

Bonjour,
tes éléments <picture> et <div class="x-content-area"> doivent avoir le même référent en l’occurrence <div class="landing-page-block">, il te faut donc mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.landing-page-block {
  position: relative;
}

ensuite tout est question d'ajustement en positionnant au mieux les éléments avant d'opérer les transformations.

En reprenant ce que tu as écris cela pourrait donner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.landing-page-block {
  position: relative;
}
picture img {
  display: block;
  width: 100%;
  height: auto;
}
.x-content-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.x-content-area p {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .2em;
}
.x-content-area h2 {
  position: absolute;
  top: 50%;
  font-size: 2em;
  font-weight: 800;
  white-space: nowrap;
  transform: rotate(-90deg) translateY(-100%) translateX(-50%);
  transform-origin: top left;
}

à tester pour ajustement, certaines valeurs de propriété ont été modifiées.

[diane621]

Merci pour cette explication