Bonjour à tous 

Je tente en vain de créer une bannière "responsive" avec du texte et des images (icone mail et téléphone sur l'exemple)

Mais dès que je réduit la fenêtre ou zoom voila ce que ça donne... (image1)

Je suis sûr de ne pas utiliser les bon attributs de position dans mon css pour que mes éléments se positionne en fonction de la largeur. Voici mon code: 

.CONTACT {
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
  color:#ffffff;
  margin-right:20%;
  MARGIN-left:20%;
  display: block;
  position: relative;

  TOP:-519px;
}


.CONTACT1 {
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
  color:#ffffff;
position:absolute;
	
}
.CONTACT4 {
     display: block;
MARGIN-left:29%;
  margin-right: 29%;
position: relative;
   top:-556px;
   left:0px;
   z-index:1;
	
}

img.CONTACT3
{
	
     display: block;
  margin-left: 18%;
  margin-right: 20%;
position: relative;
 
   z-index:1;
   top:-485px;
	
	

Des idées? 

-
Edité par isaaa. 18 octobre 2020 à 12:32:44

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Position CSS)

Bonjour.

Tu devrais t'intéresser aux pseudo éléments before et after

Tes icônes étant des caractères utf-8, c'est parfait pour ce que tu cherches à obtenir.

Edit : je te donne un coup de main. Les codes CSS des icônes que tu as choisies sont 1f57e pour le téléphone et 1f582 pour l'enveloppe.

-
Edité par Domi65 18 octobre 2020 à 12:59:02

Domi65 a écrit:

Bonjour.

Tu devrais t'intéresser aux pseudo éléments before et after

Tes icônes étant des caractères utf-8, c'est parfait pour ce que tu cherches à obtenir.

Pas bête, en plus j'ai un gros pavé de texte juste en dessous ça simplifie carrément au lieu de rajouter plein de propriétés qui charge mes fichiers

merci du tips 

En fait, après réflexion, il y a encore plus simple. Les icones utf-8 peuvent être codées en HTML

Tout ce que tu as à faire c'est ça :

🕾 NOUS CONTACTER 🖂

Salut pour le text responsive, tu peux utiliser un font-size avec une taille en vw, en fixant des limites avec clamp:

https://developer.mozilla.org/fr/docs/Web/CSS/clamp

.text{
font-size: clamp(1rem, 4vw, 2rem);
}

Ici on a taille du text =>

min  = 1rem (16px)
max = 2rem (32px)
Et 4vw entre les 2