Centrer deux parties

[Claude VIQUESNEL]

Bonjour

 Je n'arrive pas à centrer le bloc contenant les articles en rouge avec le bloc du haut en noire qui sont des widgets html

Merci de votre aide

[Soraya Lambrechts]

Salut,

Le centrage dépend surtout de la structure HTML du modèle.
Si vos deux blocs (celui du haut en noir et celui du bas en rouge) ne sont pas dans le même conteneur, ils ne pourront pas s’aligner entre eux.

Si vos deux blocs sont bien dans la même section, vous pouvez mettre cette section en flex pour forcer le centrage horizontal :

#ID_DE_LA_SECTION {
  display: flex;
  flex-direction: column;
  align-items: center;

}

Best :)

[Claude VIQUESNEL]

Merci sora... pour ton retour, j'ai mis les widgets HTML du bloc noir dans celui du bloc rouge

Pendant que j'y suis, pourrais tu m'expliquer l'mage l'image que j'ai mise en haut avec un  lien sur la galerie photos à width:500px sur les site paraît de bonne taille mais que sur le smartphone elle est trop grande et déborde à droite.

Est-il possible qu'elle s'adapte sur le smartphone, si oui comment dois-je faire stp.

Merci beaucoup de ton aide

Cordialement

[Soraya Lambrechts]

Idéalement, il vaut mieux éviter de fixer une largeur fixe pour les grandes images. Supprime les 500px dans les css.
Solution #1
# WIDGET_ID img {
  max-width: 100%;
  height: auto;
  display: block; /* optionnel - pour éviter les espaces fantômes */
}

Si tu tiens à conserver une dimension fixe, tu peux éventuellement jouer avec les media-queries :

Solution #2

/* 1 - Définir les propriétés par défaut */

#WIDGET_ID img {
  width: 500px;
  max-width: 100%;
  height: auto;
}

/* 2 - Définir les propriétés si l'écran est inférieur à 600px */

@media (max-width: 600px) {
   #WIDGET_ID img {
    width: 100%;
  }
}

Quelque soit le cas, remplace WIDGET_ID par l'identifiant du gadget pour ne cibler que l'image de ce gadget.

Best :)

[Claude VIQUESNEL]

👏 GENIAL j'ai mis 

#HTML2 img {
  max-width: 100%; margin:auto;

  height: auto;
  display: block; /* optionnel - pour éviter les espaces fantômes */
}

et ça fonctionne super

Encore mille fois merci 🙏

[Soraya Lambrechts]

De rien :)