Center mon écriture sur ma Bannière

Bonjour,



Je suis à la recherche d’un code ou d’une extension qui me permettrai de redimensionner automatique ma bannière et mon contenue qui se trouve dessus en fonction de la résolution d’écran. Car sur mon écran 22 Pouce c’est parfait ma bannière et bien et mes écriture dessus aussi (qui se trouve sur ma bannière.) Mais par contre sur mon pc portable mes écriture son totalement décalé et ma bannière un peu aussi.

Je souhaite que mon site s'adapte à la taille de la fenêtre comme sur ce site:

Dans la capture 3 et 4 On voit que le site s'adapte à la taille de la fenêtre et tout suit l'écriture sur la bannière et la bannière elle-même.

Voici des capture d'écran :

17 pouce sur mon portable :

https://zupimages.net/viewer.php?id=20/16/w5da.png

Et sur mon écran 22 Pouce :

https://zupimages.net/viewer.php?id=20/16/8t1k.png

Et l'autre quand je réduis la fenêtre de Firefox comme vous pouvez le voir tous les changements.

Je souhaite que mon site s'adapte à la taille de la fenêtre comme sur ce site:

Voici les captures 3 et 4. On voit que le site s'adapte à la taille de la fenêtre et tout suit l'écriture sur la bannière et la bannière elle-même.

Capture 3 et 4 :
https://zupimages.net/viewer.php?id=20/16/phj4.png
https://zupimages.net/viewer.php?id=20/16/t369.png

Pouvez-vous s’il vous plaît m’aider dans l’attente de votre retour merci d’avance ????

Ma configuration WP actuelle 5.4

Version de PHP/MySQL : 7.2
Thème utilisé : OceanWP
Extensions en place : plusieurs de chez Elementor
Modifié par Merry (15 Apr 2020 - 12:55)

Bonjour,

Il faut simplement de rendre votre site responsive pour qu'il s'adapte à toutes les résolutions d'écrans.

https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

Bonjour,

Merci pour votre retour

Mais j'ai malheureusement déjà essayé et ça ne fonctionne toujours pas. (enfin pour toute les résolution)

Je les fais sur l'une des section voici les capture d'écran :

Pc : https://zupimages.net/viewer.php?id=20/16/mib6.png
Tablette : https://zupimages.net/viewer.php?id=20/16/lsh1.png
Portable : https://zupimages.net/viewer.php?id=20/16/v8xi.png

Et quand je vais sur mon pc portable le texte et toujours en décalé comme sur la capture d'écran plus haut dans mon 1er poste.

Je précise que dans élementor on peux rajouter du CCS.

J'ai aussi trouvé ce petit tuto pour mettre du texte en CCS : https://www.youtube.com/watch?v=3tCOMrvaGto

Certain code fonctionne quand je les mes en place. Mais quand je fais un aperçue il y a plus rien.

J'ai beau chercher et je ne trouve aucune solution à ce souci alors que les site ou les thème de élementor se mette en place tout seule. Quand je fais des essai avec ma fenêtre de mozilla réduire ou agrandir le site complet s'adapte très bien. Et la impossible
Modifié par Merry (15 Apr 2020 - 14:48)

Bonjour Merry !
Si tu veux centre ton texte horizontalement de façon responsive :

.banniere  {
text-align: center;
}

Si tu veux centre ton texte verticalement de façon responsive :

.banniere {
height: 50px /* Imaginons que ta bannière fasse 50px de long. */
line-height: 50px /* Mets une line-height égale à la taille de ta banniere, 50px dans ce cas */
}

Voili voilou ... Hésite pas à me dire si tu as trouver ton bonheur

Bonjour vzytoi,

Merci pour ton retour

Alors que viens d'essayer et malheureusement cela ne fonctionne pas pour les deux code je les et essayé un par un

Je sectionnelle bien sur mon texte pour ensuite lui mettre ce code.

Tu as une idée pourquoi ? Je mis le code dans le CCS voir la capture d'écran :

https://zupimages.net/viewer.php?id=20/16/x8d6.png

Dans l'attente de ton retour merci à toi
Modifié par Merry (16 Apr 2020 - 08:51)

Coucou Merry !
Je suis certain que cette technique marche effectivement ... Je l'utilise moi même fréquemment.
Ça m'aiderais si tu me mettais le css de ta bannière pour que je puisse t'aider au maximum.

Re Merry ... Ayant pas bien comprit ce que tu voulais je t'ai fait ça.
Dis moi ce que tu en penses pour que nous puissions t'aider

https://jsfiddle.net/vzytoi/m3s6ak1t/40/

Pour résumer ce que j'ai fait dans le lien essaye ça

.selection {
position: relative; 
transform: translateY(-50%);
top: 50%; 
text-align: center;
}

Modifié par vzytoi (16 Apr 2020 - 15:54)

Re Bonjour vzytoi

Enfaite je souhaiterai que mon Bienvenue au Château Prainaud soit center pour tout les résolution d'écran possible.

Car comme tu as pu le voir sur mon écran de 22 Pouces tout et bien centrer. Hors quand je prends mon pc portable qui ne fait que 17 Pouce quand je retourne sur le site et bien malheureusement tout le texte et décaler il n'est plus centrer.

Je viens d'essayer le code que tu viens de me donner ne fonctionne pas mais je sais pas si je le met en bonne endroit je le met toujours dans le section CCS

voici la capture : https://zupimages.net/viewer.php?id=20/16/9jsg.png

Dans l'attente de ton retour
Modifié par Merry (16 Apr 2020 - 18:50)

Re re bonjour Merry.
On va faire un test pour voir si les 3 éléments sont bien sélectionnés. Colle le code que je te donne au même endroit et envoie moi un screen du résultat (c'est moche mais temporaire ne t'inquiète pas, c'est juste un test).

.selection {
color: red;
}

Re Coucou vzytoi

Je viens d’essayer le code et cela na rien changer (aucune réaction )

voici une capture d'écran :

https://zupimages.net/viewer.php?id=20/16/vs3d.png

Car contre quand j’essaie ce code cela fonctionne regarde :

.selector {
	position: relative
	right: 50px;
	bottom: 140px;

voici une capture :

https://zupimages.net/viewer.php?id=20/16/qbzb.png

J'ai changé la valeur bottom et cela fait bouger mon Bienvenue

Dans l'attente de ton retour merci pour le temps que tu me consacre
Modifié par Merry (17 Apr 2020 - 09:02)

Coucou ...
Je ne connaîs pas du tout ce logiciel mais peut être que la solution ce trouve dans la section positionnement que l'on peut voir dans les screens que tu as envoyés
Bonne après-midi !

Coucou vzytoi

Je viens de regarder et non dans position je vais pouvoir le mettre à l'emplacement que je veux mais pour ma résolution d'écran en 22 pouces.

Car après sur je vais sur le site avec mon pc portable tout est décalé.

Mais je pense quand tien le bon bout avec le code que je t'es montré puisque le texte bouge.

Il faudrait voir avec un code pour le centrer et lui demander de ce centrer tout seul pour toute les résolution c'est possible, tu as une idée éventuellement ? =)

Merci à toi

PS : J'ai trouvé une ligne de code qui me centre le texte regarde vzytoi voici le code :

selector {
	position: relative
	right: 80px;
	bottom: 80px;
	text-align: center;

Voici le résultat :

https://zupimages.net/viewer.php?id=20/16/duuj.png
https://zupimages.net/viewer.php?id=20/16/ogbz.png

Mais le souci c'est que c'est pas bien centrer et j'aimerai qu'il soit un peu plus décaler vers la droite.
Modifié par Merry (18 Apr 2020 - 10:37)